Navigation rail
The skinny vertical app menu made mostly of icons, often expandable into a wider sidebar with labels.
See it
What it is
A navigation rail is a narrow vertical strip of primary destinations, usually fixed to the left edge and represented by icons. Some rails expand to reveal labels, while others keep short labels under the icons. Material Design named it as the middle-screen counterpart to a bottom navigation bar and a wider navigation drawer. VS Code's activity bar is the same idea in a desktop app.
Reach for one in an app with a small set of top-level places people switch between often, especially on tablets and desktop windows where vertical space is plentiful. It saves width compared with a full sidebar while keeping destinations visible, unlike a menu hidden behind a button.
Gotcha: icons are rarely as obvious as their designers think. Give every destination a visible label in expanded mode, an accessible name, and a tooltip when collapsed. Keep the current destination unmistakable, do not pack the rail with secondary actions, and change patterns deliberately on narrow screens rather than crushing the content.
Ask AI for it
Build a left navigation rail inspired by Material Design 3. Use CSS Grid for an 80px rail plus the main content, with five top-level links stacked vertically and the account action pinned to the bottom. Give each link an icon, accessible name, tooltip, and aria-current='page' active state. Add a button that expands the rail to 240px and reveals text labels without changing DOM order; animate the rail width over 180ms through a --rail-width custom property registered with @property so it interpolates in every browser, and disable the transition under prefers-reduced-motion. Replace it with a tab bar below 700px.