Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Live Demo
Actually clickableThe drawer covers this half of the page
What you just saw:The menu that slides in from the left when you tap the hamburger icon, the "Selected items" panel that slides out from the right in a shopping cart, the settings panel that side-slides in.
What it actually is
What defines a drawer is that it slides in from an edge and either pushes aside or covers the original page. A drawer that slides up from the bottom is usually just a bottom sheet; the real distinction is the side drawer, which carries navigation or filters without interrupting the main flow.
Anatomy · What it's made of
Overlay遮罩层
Translucent black, closes on click
Panel面板
Slides in from the side, width 280–320px
Handle边缘把手
Optional, hints that the panel can slide out
Content内容
Navigation items or a form
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Mobile needs room for entries that bottom navigation cannot fit | Yes |
| There are many filter conditions that need a full panel to live in | Yes |
| The main content needs to stay visible (to compare against filtered results) | Depends |
| You need to show a large amount of information at once (help, details) | No |
Once a drawer holds tabs and accordions, it is a page wearing a disguise — just navigate there.
Nesting drawers inside drawers turns the back behavior into a guessing game.
Similar Patterns
Don't mix these upDrawerCurrent
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
In one line:A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Sidebar
侧边栏
A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Navigation Rail
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a drawer that slides in from the left, 300px wide, carrying the primary navigation. A hamburger button opens it; a scrim click or Esc closes it, and focus returns to the button on close.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a side panel that slides out.
Say this instead
Add a left drawer (300px wide): opened by a hamburger button, 40% scrim, Esc and scrim click both close it, focus trapped inside, focus returned to the button on close, background scroll locked, and a permanent sidebar at ≥1024px instead of a drawer.
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.