Sidebar / rail
A narrow column pinned beside the main content, usually for navigation. A 'rail' is the skinny icon-led version, labels optional.
See it
What it is
A sidebar is a narrow column parked beside the main content that persists as you move around: navigation, filters, a table of contents, a channel list. A rail is its skinny cousin, roughly 56 to 80px wide: compact vertical navigation, usually icon-led, sometimes with a short label tucked under each icon and sometimes with none at all. Material Design formalized the term 'navigation rail' as the middle option between a bottom bar and a full drawer, and its expanded variant keeps labels visible.
Reach for one when the product has many destinations a user hops between constantly, which is why Slack, Linear, VS Code, and every dashboard converge on it. Many apps run both at once: a rail of app or workspace icons hard against the left edge, then a wider sidebar of items within the selected one.
Gotcha: every pixel of sidebar is a pixel the actual content does not get, so a rail that is only ever four links is a tax. Icons-only rails also need tooltips and real accessible names, since a bare glyph is a guessing game. On narrow screens the sidebar has to become something else (drawer, bottom bar), so plan that collapse rather than letting it squeeze.
Ask AI for it
Add a persistent left sidebar to this app shell: CSS Grid with grid-template-columns: 260px 1fr and full viewport height. The sidebar holds a logo row, grouped nav links with a 20px icon plus label, a clear active state, and a user block pinned to the bottom. Give it its own scroll, a 1px right border, and a surface tint distinct from the content area. Add a collapsed rail mode of 64px showing icons only with tooltips and aria-labels, and below 900px hide it behind a hamburger that opens it as an overlay drawer with focus trapping.