Nav Item v0.5.1 · @behivetech

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

1import { NavItem } from "@behivetech/atoms.nav-item";
2
3function Example() {
4  const currentPath = "/pages";
5  return (
6    <NavItem href="/pages" icon="☰" active={currentPath.startsWith("/pages")}>
7      Pages
8    </NavItem>
9  );
10}

Examples

Open all 3 →

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 />);

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, …).

Usage

Examples

Properties

NavItem props

`NavItem` props