✍️ Side nav

Updated 2026-05-14

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

1
Container
the navigation region — typically a landmark role (nav/banner)
2
Items
individual navigable entries; one is marked "current" when applicable
3
Item label
short, scannable text; never sentence case
4
Item icon (optional)
reinforces meaning at a glance; not a substitute for label
5
Active indicator
visual treatment for the current item — underline, bar, fill, or background
6
Trigger (optional)
opens a dropdown/menu for grouped or contextual items

	`Collapsed`	`Expanded`
`Admin`
`Studio`

hover/focus transitions on items stay subtle — no large translation

dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button