Nav Item

v0.5.2
Stable

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.

pnpm add @behivetech/atoms.nav-item

This is the snapshot of v0.5.2, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.5.2 are shown as code; only the latest version runs live. Open the live examples →

Basic Nav Item
1const BasicNavItem = () => (
2  <NavItem href="/pages" icon="☰">
3    Pages
4  </NavItem>
5);
6

7render(<BasicNavItem />);
Active Nav Item
1const ActiveNavItem = () => (
2  <NavItem href="/" icon="⊞" active>
3    Dashboard
4  </NavItem>
5);
6

7render(<ActiveNavItem />);

With `asChild`, a router link renders as the item; `active` marks it as the current route and sets `aria-current="page"`.

As Child Nav Item
1const AsChildNavItem = () => (
2  <NavItem asChild active>
3    <a href="/guide">Guide</a>
4  </NavItem>
5);
6

7render(<AsChildNavItem />);