Recipe
Sidebar navigation patterns
A collection of sidebar navigation recipes for dashboards, docs, and settings panels. Each pattern is self-contained and uses only Tailwind utility classes.
Overview
Sidebar navigation anchors the user's mental model of an application. A well-built sidebar provides persistent orientation, reduces cognitive load, and scales from simple flat lists to deep nested hierarchies.
All examples below assume a fixed-width sidebar (~14rem–16rem) paired with a flexible main content area. The sidebar itself uses sticky positioning so it remains visible during scroll.
Collapsible sections
Group related links under expandable headings. Use a disclosure triangle or chevron to indicate collapsed state. Keep the animation subtle — a simple height transition or opacity fade works without pulling in animation libraries.
Active states
Highlight the current page with a left accent border and a subtle background tint. The active item should feel anchored, not loud.
Nested items
Indent child links under a parent category. Use a vertical line or left padding to communicate hierarchy. Keep nesting to two levels maximum for usability.
Icon + label
Pair each link with a small monochrome icon. Icons improve scanability but must stay consistent in size and stroke width. Collapse to icon-only on narrow viewports if needed.