Navigation

SideNav

Desktop navigation down the left edge: icon, label and an optional count per item.

Preview

Props

Guidelines

Desktop navigation down the left edge: icon, label and an optional count per item. The current page gets a gray fill and a bold label; no stripe or bar.

Provide: items ({ key, label, icon, href, count, countTone, countLabel }), the current value, an optional heading, and a label for the landmark.

• Sit it on background-base, side-nav-width wide, with the content area on background-layer-1.
• Counts are for things that need a response; red (negative) only for overdue.
• The current page is marked by fill and weight alone. No colored bar or stripe on the edge.
• Items are 40px tall with 4px between them, so the list breathes. Group related places: a second SideNav with a heading ("Money") separates them from the main ones.

• Collapsed. collapsed shows icons only in a narrow pane: labels stay for screen readers and show as tooltips, and a count becomes a small badge on the icon. The app puts "Collapse sidebar" (chevron-double-left) at the foot, and an icon-only "Expand sidebar" (chevron-double-right) when collapsed; the choice is remembered. Account takes collapsed too (avatar only), and ThemeToggle turns vertical.

• The current item is the raised selected thumb with bold text, so it stands out on the glass. Counts are small circles: a raised white circle (the selected fill) with the number, or a red circle with white text when something is overdue; collapsed, they sit on the icon. The number always has a label for screen readers, so the red is never the only cue. Fill and weight only, no stripe.

• Motion. Changing pages slides the thumb from the old item to the new one (220ms, ease out). It is placed without motion on first load, and with reduced motion it moves at once.

Nested pages

Give an item children for pages that belong under it, like Workspace under Settings. They show indented below it while you are on it or on one of them, and the thumb moves to the child. Keep it to one level and a few children.