Sidebar Navigation
A vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.
A sidebar is what you use when the product has more destinations than a top bar can hold. Vertical space is cheaper than horizontal, labels can be full words rather than one, and groups can carry headings. That makes it the default for dense B2B software, admin panels and anything with more than about eight destinations.
Nesting is the risk. One level of groups is readable; two is a decision tree; three means the information architecture is unresolved and the sidebar is absorbing the confusion. If items only make sense three levels down, the grouping is wrong, not the component. Collapsed-to-icons modes need tooltips and a remembered preference, and the active item must stay visible when the user is deep in a section.
In practice
An ERP grouped 40 destinations under three top-level headings with two levels of nesting. New users took a median 4.5 minutes to find the invoice list in first-run testing. Flattening to eight groups with one level, ordered by observed frequency, brought that under 40 seconds.
Where teams get it wrong
- More than one level of nesting, which hides structural problems rather than solving them.
- Icon-only collapsed states with no tooltips.
- Active state lost on nested routes, so people cannot tell where they are.
- Collapse preference not remembered between sessions.
- Ordering by internal team structure rather than by how often things are used.
( Learn more )
Related terms
All terms- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.
- BreadcrumbA trail showing where the current page sits in a hierarchy, and a way back up it.
- Information ArchitectureThe structure of a product's content and navigation — how things are grouped, labelled and related so people can find what they need.
- Drawer (UI)A panel that slides in from an edge and leaves the page behind it visible — for work that needs the context it came from.