Navigation
Sidebar Nav Item
Sidebar Nav Item is a single navigation item within a persistent app Sidebar, with an icon, label, and Active state indicating current location.
State (Default/Hover/Active/Disabled) — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Sidebar Nav Item is a single navigation item within a persistent app Sidebar, with an icon, label, and Active state indicating current location.
When to use
Primary app navigation between major sections in a persistent side panel.
When not to use
Transient or contextual menus — use Menu Item.
Accessibility
Active item should have aria-current="page", paired with both background change and Bold text — not color alone.
Common mistakes
Making the Active state too subtle to notice at a glance.
Properties
State as variants. Label (text). Icon (instance-swap).
Tokens used
semantic/surface/elevatedsemantic/action/primarysemantic/icon/muted