Nav Item
v0.5.0StableA single navigation link with an optional leading icon and active state. The `active` modifier is applied on the component's own root element (per BEM), so it can be dropped into any nav/sidebar layout.
A single navigation link with an optional leading icon and active state. The
active modifier is applied on the component's own root element (per BEM),
so it can be dropped into any nav/sidebar layout.
Usage
Examples
Open all 3 →Properties
NavItem props
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Whether this item represents the current route: adds the `--active` modifier and sets `aria-current="page"` unless you pass your own `aria-current`. |
asChild | boolean | false | Renders the item's props onto its single child element (via Radix `Slot`) instead of an `<a>`, so a router link such as Next's `Link` can be the element. The child supplies the content, so `icon` is ignored. |
children | ReactNode | — | Content to render inside the component |
className | string | — | Additional class names to merge with the component root element |
icon | ReactNode | — | Leading icon rendered before the content |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).