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.
Examples of v0.5.0 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 Pages4 </NavItem>5);67render(<BasicNavItem />);
Active Nav Item
1const ActiveNavItem = () => (2 <NavItem href="/" icon="⊞" active>3 Dashboard4 </NavItem>5);67render(<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);67render(<AsChildNavItem />);