Build Assets
UI Component
Navigation Sidebar
Persistent vertical navigation for multi-section products with 5+ destinations.
Platform: webTags: navigation, sidebar, nav, menu
Purpose
Provides persistent access to all primary sections. Use when the product has 5+ top-level destinations and users navigate between them frequently.
Anatomy
- Container: fixed or sticky left column, 220–260px wide
- Logo area: top 48–64px — brand mark + product name
- Nav items: icon (20px) + label (14px), 40px height, 8px horizontal padding
- Active indicator: left border (3px) or filled background
- Section headers: 11px uppercase label to group related items
- Footer: user avatar / settings / sign-out at bottom
States
- Default: all items visible, active item highlighted
- Hover: background color shift (--color-bg-hover)
- Active: accent left border or filled pill background
- Collapsed (icon-only): 60px wide, icons only with tooltips on hover
- Mobile: hidden by default, slide-in on hamburger tap
Tokens
spacing
itemPadding: 10px 12pxitemGap: 2pxsectionGap: 16px
sizing
width: 240pxcollapsedWidth: 60pxitemHeight: 40px
Do
- Limit top-level items to 7 (Miller's Law — working memory cap)
- Group related items under section headers
- Show active state clearly — users must always know where they are
- Persist scroll position between navigations
Don't
- Use a sidebar for 4 or fewer destinations — use a tab bar instead
- Nest more than 2 levels of navigation in a sidebar
- Use icons alone without labels unless collapsed mode is intentional
- Put destructive actions (delete, sign out) above the fold in the sidebar
Accessibility
- nav element with aria-label="Primary navigation"
- Current page: aria-current="page" on the active link
- Collapsed state: aria-expanded on the toggle button
- Skip navigation link at top of page for keyboard users