Navigation Rail
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
Live Demo
Actually clickableMain content
What you just saw:Open a web admin console or a tablet productivity app and the vertical stack of icons plus labels on the left is the navigation rail. Hit the hamburger button and it expands into a full sidebar.
What it actually is
A navigation rail is the vertical twin of bottom navigation. On tablets, desktops, and wide web layouts it replaces bottom navigation, fits more destinations, and can expand to show text labels.
Anatomy · What it's made of
Rail导航轨容器
Vertical arrangement, collapsible
Destination导航项
Icon + label
FAB浮动按钮位
The top of the rail often holds the primary action
Collapse Toggle折叠开关
Switches between icon-only and expanded
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Tablet, desktop, or widescreen layouts | Yes |
| There are more than 5 destinations | Yes |
| Global navigation must stay visible at all times | Yes |
| Small phone screens in portrait | No |
On a phone it eats precious width — bottom navigation or a hamburger menu is better.
With only two destinations, a row of text links is enough.
Similar Patterns
Don't mix these upNavigation RailCurrent
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
Sidebar
侧边栏
A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
In one line:A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
Sidebar
侧边栏
A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a navigation rail to the left of the tablet layout, icon above label, with Overview / Media / Albums / Settings, collapsible down to icons only.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a sidebar menu on the left.
Say this instead
Add a navigation rail on the left — icon above label — that automatically collapses into a hamburger-controlled Drawer below 840px width.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.