Components · Structure

SidebarSidebar

The narrow navigation column of an app

npx shadcn@latest add @umbra/sidebar

Sidebar (72 px tile) and SidebarItem (round 48 button with a 24 icon). The item label goes into aria-label and the title tooltip. On macOS a WindowBar sits above the sidebar

When to use

  • App sections: “Meetings”, “Summaries”, and at the bottom “Settings”, “Privacy”, theme

When not to use

  • The site: the site grid with a 320 sidebar and a feed
  • A page action: Button

Meetings

7 recordings this week

Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Don’t

  • Text labels under icons and colored badges
  • Accent color for the selected item: only --nav-active