Nav item

NavItem is a single navigation link with built-in hover, active, and disabled styling. It is the primitive that SidebarNavigation and SubNavigation render internally — reach for it directly only when composing a custom navigation surface those two don't cover.

Use it for

• Composing a bespoke navigation rail or bar from individual links
• A one-off nav link that sits outside a full navigation component
• Icon-only nav entries in a collapsed rail

Import

import { NavItem } from '@brikdesigns/bds';

Variants

Default

label is the visible text; href makes it a link, or omit href and pass onClick for button-style behavior. active marks the current page and sets aria-current="page".

<NavItem label="Overview" href="/overview" active />
<NavItem label="Settings" href="/settings" icon={<Icon icon={Gear} />} />

Disabled

disabled blocks the click, mutes the styling, sets aria-disabled, and drops the item out of the tab order.

<NavItem label="Billing" href="/billing" disabled />

Icon only

iconOnly hides the label and promotes it to the aria-label — for collapsed rails where only the icon shows.

<NavItem label="Search" href="/search" icon={<Icon icon={MagnifyingGlass} />} iconOnly />

Client-side routing

linkComponent swaps the default bare <a> for a router-aware component (Next.js Link, Remix Link) so navigation stays client-side. It is ignored when disabled or when href is omitted. See ADR-012.

import Link from 'next/link';

<NavItem label="Dashboard" href="/dashboard" linkComponent={Link} />

When not to use

• Don't use it for in-page tabs. Switching panels within a page is TabBar.
• Don't use it as a button. A general action trigger is Button; NavItem is for navigation.

Accessibility

• Renders an <a> (or the injected linkComponent); active sets aria-current="page".
• disabled sets aria-disabled, clears href, and removes the item from the tab order (tabIndex={-1}).
• In iconOnly mode the label becomes the aria-label, so the control keeps an accessible name with no visible text.

API

Plus className for layout-slot integration.

Related

• SidebarNavigation — vertical app rail built from NavItems
• SubNavigation — second-column section nav built from NavItems
• TabBar — in-page panel switching
• Storybook playground