NavItem

molecules

Sidebar navigation item — 20px icon + label + optional badge. Active state shows 4px teal accent on left edge, white background, and teal-700 text.

ARIA Role: link | button

Demo

Demo for NavItem (molecules)

Sidebar navigation item — 20px icon + label + optional badge. Active state shows 4px teal accent on left edge, white background, and teal-700 text.

Props

Prop	Type	Required	Default
`label`	`string`	Yes	`—`
`icon`	`React.ReactNode`	Yes	`—`
`href`	`string`	No	`—`
`active`	`boolean`	No	`False`

TypeScript Interface

interface NavItemProps {
  label: string;
  icon: React.ReactNode;
  href?: string;
  active?: boolean;
  badge?: { count: number; ariaLabel: string };
  hasDropdown?: boolean;
  onClick?: () => void;
}

Assertions (NASA Rule 5)

[type]label and icon required(NASA Rule 5)
[aria]When active, must set aria-current='page' on the underlying <a> or <button>(WCAG 4.1.2)

Usage

Import

import { Navitem } from '@epasslive/design-system'

Basic

<Navitem />

With Variants

<Navitem variant="primary" size="md" />