Sidebar
A sidebar is a vertical navigation panel, typically anchored to the left or right of the screen, that gives access to primary or secondary destinations within an app or website.
Philosophy
Sidebars provide persistent navigation and contextual tools without overwhelming the main workspace.
They expose hierarchies of destinations at a glance.
They balance breadth and depth better than tab bars.
They are ideal for apps with complex structures.
Anatomy
Variants
Standard
Always visible (common in desktop apps).
Compact
For mobile. Collapses the entire navigation.
States
Active
Current section highlighted with color, background, or marker.
Usage tips
Dos
Use for apps with complex structures or multiple navigation levels.
Keep labels concise and icons recognizable.
Group related items with headings or separators.
Provide collapse or hide functionality for smaller screens.
Don’ts
Don’t overload with too many items — prioritize clarity.
Don’t use sidebars for short, simple apps — a tab bar may be better.
Don’t hide the active indicator — users should always know where they are.
Real-world example
