VOL. III · CH. 3.3 · COMPONENT
Sidebars
Persistent structure for products with enough depth that top navigation alone can't hold it.
1 min read · 109 words
3.3.1Definition & Anatomy
A sidebar is a vertical navigation panel, typically fixed alongside main content, used for deep or frequently-switched-between sections — common in documentation, dashboards, and admin tools.
3.3.2Common Mistakes
- No collapse option on smaller viewports, eating usable content width.
- Flat, unstructured lists for genuinely hierarchical content, forcing excessive scrolling.
- Losing scroll position or expanded state when navigating between pages.
3.3.3Best Practices
- Collapse to an icon rail or off-canvas drawer below a defined breakpoint.
- Persist expand/collapse and scroll state across navigation within a session.
ExampleThis handbook's own sidebar collapses into a slide-out drawer on mobile — the same pattern used across most documentation-style products.