Docs/NavItem

NavItem

Sidebar navigation item with icon, active state, and optional badge.

Usage

tsx

1import { NavItem } from '@storm-ds/ui'
2import { Home } from '@storm-ds/icons'
3
4<NavItem icon={<Home className="w-5 h-5" />} active>
5  Dashboard
6</NavItem>

Basic

tsx

1<NavItem>Dashboard</NavItem>
2<NavItem active>Active Page</NavItem>

With Icons

tsx

1<NavItem icon={<Home className="w-5 h-5" />} active>Home</NavItem>
2<NavItem icon={<User className="w-5 h-5" />}>Profile</NavItem>
3<NavItem icon={<Settings className="w-5 h-5" />}>Settings</NavItem>

With Badge

tsx

1<NavItem icon={<Bell className="w-5 h-5" />} badge={<Badge size="sm">3</Badge>}>
2  Notifications
3</NavItem>

Props

Prop	Type	Default	Description
active	boolean	false	Shows active/selected state
icon	React.ReactNode	-	Leading icon element
badge	React.ReactNode	-	Trailing badge or indicator
disabled	boolean	false	Disables the nav item
children	React.ReactNode	-	Label text
className	string	-	Custom classes

Use with AI

Create sidebar navigation using Storm UI's NavItem. Import: `import { NavItem } from '@storm-ds/ui'`. Props: active (boolean), icon (React.ReactNode), badge (React.ReactNode), disabled, children, className. Renders as a button. Use for sidebar menus. Example: `<NavItem icon={<Home />} active>Dashboard</NavItem>`

Menubar

Sidebar