NavItem

<ts-nav-item> vv0.4.0

The ts-nav-item component.

Open in Storybook for interactive demos.

Preview

<ts-nav-item>Content</ts-nav-item>

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	Whether this item is currently active.
disabled	disabled	boolean	false	Whether this item is disabled.
href	href	string | undefined	—	The URL to navigate to.
icon	icon	string | undefined	—	Lucide icon name to display.

Events

Event	Detail	Bubbles	Composed	Description
tsSelect	void	Yes	Yes	Emitted when the nav item is selected.

Slots

Name	Description
*(default)*	Default slot for label text.

CSS Parts

Use ::part() to style internal elements:

Part	Description
icon	The icon wrapper.
item	The list item wrapper.
label	The label wrapper.
link	The anchor or button element.

ts-nav-item::part(icon) {
  /* your custom styles */
}

Usage

HTML

<ts-nav-item>Content</ts-nav-item>

React

import { TsNavItem } from '@tessera-ui/react';

<TsNavItem>Content</TsNavItem>