NavItem

Navigation item component for sidebars and menus. Supports icons, text labels, and optional badges with hover, active, and focus states.

When to use

check_circleWhen to use

  • For sidebar navigation menus
  • When showing navigation with icons and labels
  • For indicating active/current page
  • When you need to show counts alongside navigation

cancelWhen not to use

  • For primary actions (use Button instead)
  • For inline text links
  • When the navigation is too complex (consider restructuring)

With Badge

States

circleOverview
29
Default
circleOverview
29
Hover
circleOverview
29
Active
circleOverview
29
Focus

Without Badge

States

settingsSettings
Default
settingsSettings
Hover
settingsSettings
Active

Different Icons

Examples

dashboardDashboard
5
analyticsAnalytics
99+
mailMessages
12
personProfilesettingsSettings

Usage

tsx
import { NavItem } from '@/components/NavItem';

// Basic navigation item
<NavItem text="Overview" icon="apps" />

// With badge
<NavItem text="Messages" icon="mail" badge={12} />

// Active state
<NavItem text="Dashboard" icon="dashboard" active />

// As link
<NavItem text="Settings" icon="settings" href="/settings" />

Props

PropTypeDefaultDescription
text*string—Navigation item label
iconstring'circle'Material Symbols icon name
badgestring | number—Optional badge count
activebooleanfalseWhether the item is currently active
hrefstring—Link destination URL
onClick() => void—Click handler function

Accessibility

  • Uses semantic <a> or <button> element
  • Active state uses aria-current="page"
  • Icons have aria-hidden="true"
  • Supports keyboard navigation (Tab, Enter)
  • Focus state is clearly visible