Sidebar
A vertical area beside the main content that keeps navigation, filters, or supporting controls close at hand.
See it
What it is
A sidebar is a vertical region beside the main content that stays available for navigation, filters, inspectors, or supporting context. Slack's channel list and VS Code's explorer are familiar examples: the sidebar holds the structure while the larger pane does the work.
Reach for one when people repeatedly move among many sections or need controls that should remain visible while the main view changes. It earns its permanent width on desktop; on a narrow screen it usually becomes a drawer opened by a clearly labelled button. Use 'nav' when it contains primary navigation and 'aside' only when its content is secondary to the page.
Gotcha: fixed widths can starve the main pane, especially with long translated labels or browser zoom. Let the layout shrink gracefully, truncate only when the full label remains available, and preserve keyboard focus when collapsing. A collapsed rail of unexplained icons saves space but turns navigation into a memory test.
Ask AI for it
Build a responsive application sidebar like Slack's channel rail. Use CSS Grid with grid-template-columns: 16rem minmax(0, 1fr), make the sidebar position: sticky at top: 0 with height: 100dvh, and put the navigation in a labelled 'nav' element. Show grouped links with icons, clear current-page styling through aria-current='page', visible :focus-visible rings, and an independently scrolling list. Below 768px, replace the persistent column with a drawer opened by a labelled menu button; lock body scroll, close on Escape or backdrop click, return focus to the trigger, and respect env(safe-area-inset-left).