navigation contract
Sidebar
Persistent vertical navigation. The default left rail in dashboards.
Variants
- expanded
- Labels + icons (default desktop)
- collapsed
- Icons only — narrow viewports / focus mode
- rail
- Mac-style 64pt rail with tooltips
- sheet
- Slides in over content on mobile
Sizes
- sm
- 200pt wide
- md
- 240pt wide
- lg
- 280pt wide
Slots
- header
- Org / project switcher
- nav
- Sectioned link groups
- footer
- User card / settings shortcut
Example
<Sidebar><SidebarHeader>Acme Inc.</SidebarHeader><SidebarNav>...</SidebarNav><SidebarFooter><UserCard /></SidebarFooter></Sidebar>Usage rule
role="navigation" + aria-label="Primary".
The full Sidebar contract has 5 more rules, plus the do-not patterns. Get the full recipe.