Sidebar
侧边栏
A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
Live Demo
Actually clickableMain content
What you just saw:The page tree down the left of Notion, the repository menu on the left of GitHub, the list of mail folders that slides in from the left when you open Gmail — all sidebars.
What it actually is
A sidebar is a container shape for navigation: persistent on the left on desktop, a slide-over panel on mobile. How it differs from a navigation rail is that a sidebar usually carries text labels and group headings — it is navigation in its expanded form.
Anatomy · What it's made of
Panel面板
Fixed to the side, can slide open
Header顶部区
Logo / title / close button
Nav Group导航分组
A set of destinations under a small heading
Item导航项
Icon + text, can nest children
Scrim遮罩
The translucent overlay covering content on mobile
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Many destinations that need grouping and text labels | Yes |
| On desktop, navigation should stay visible | Yes |
| Mobile needs to hold destinations that do not fit in bottom navigation | Yes |
| The page itself is very short, with only 2–3 destinations | No |
Spending 240px of width on three or four destinations is obvious wasted space.
A persistent sidebar on mobile squeezes the content area very narrow.
Similar Patterns
Don't mix these upSidebarCurrent
侧边栏
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.
In one line:A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
Navigation Rail
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a sidebar that slides in from the left, with two groups — "Workspace" and "Personal" — opened by a hamburger button on mobile and persistent on desktop.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a menu on the left that slides out.
Say this instead
Add a slide-over sidebar (260px wide): persistent on desktop, opened by a hamburger button with a scrim on mobile, grouped under "Workspace / Personal", dismissible with Esc.
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.