NavItem

<ts-nav-item> vv0.6.3

The ts-nav-item component.

Open in Storybook for interactive demos.

Preview

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

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this item is currently active.
`badge`	`badge`	`string \| undefined`	—	Badge text or count to display after the label.
`disabled`	`disabled`	`boolean`	`false`	Whether this item is disabled.
`expandable`	`expandable`	`boolean`	`false`	Whether this item contains expandable nested items.
`expanded`	`expanded`	`boolean`	`false`	Whether the nested items are currently visible.
`href`	`href`	`string \| undefined`	—	The URL to navigate to.
`icon`	`icon`	`string \| undefined`	—	Lucide icon name to display.

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

Name	Description
`(default)`	Default slot for label text.
`children`	Slot for nested nav items when expandable.

Use ::part() to style internal elements:

Part	Description
`badge`	The badge element.
`chevron`	The expand/collapse chevron indicator.
`children`	The nested children wrapper.
`icon`	The icon wrapper.
`item`	The list item wrapper.
`label`	The label wrapper.
`link`	The anchor or button element.

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

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

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

<TsNavItem>Content</TsNavItem>