Drawer
抽屉
Aliases:抽屉侧滑面板滑出面板侧边抽屉侧拉页面汉堡菜单点开的面板手机上滑出来的面板
What is it
A panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
Interactive playground
Try it. Make an informed choice.Open the side panel, inspect it and dismiss it; compare placement variants.
Loading lab…
What to look for
- 01Keep dismissal visible; modal drawers should support Escape.
- 02Scroll long content inside the panel and preserve the background state.
✓ When to use
- Inspect details without leaving the list (mail, orders)
- Host side navigation on mobile
- Quick edit or filter while keeping page context
✕ When not to use
- A forced decision is required — use a modal
- One or two lines of content — use a popover or tooltip
- Persistent desktop navigation — use a sidebar
Variants
Right edge
右侧滑入
The common direction for detail panels
Left edge
左侧滑入
Common for mobile navigation drawers
Bottom sheet
底部抽屉
Mobile action and filter panels
Implementation
position: fixedtransform: translateX(100%)transitionz-indexoverflow-y: autoFix the panel at the edge and animate transform translateX to hide/show (GPU-friendly, do not animate width); fade the backdrop in sync. Scroll long content inside with overflow-y-auto and pin footer actions. Focus management and scroll lock match the modal; close on Esc, add edge-swipe gestures on mobile.
Platform API
<dialog>role="dialog"aria-modal="true"Compare
Full comparison →| Drawer抽屉 | Bottom Sheet底部抽屉 | Modal模态框 | Popover气泡卡片 | |
|---|---|---|---|---|
| Interruption | High — backdrop covers the page while open | Medium-high — backdrop blocks, but a swipe dismisses fast | High — backdrop blocks the page | Low — no backdrop, page stays live |
| Content capacity | High — long lists and forms fit | Medium-high — action lists and short forms fit | Medium — short content and small forms | Medium — small interactive content |
| Mobile friendly | Good — edge sliding feels natural | Excellent — the thumb zone is the bottom of the screen | Medium — go full-screen for long content | Poor — anchored position overflows easily |
Related concepts
A dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAlternativeA vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsSimilarA non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsAlternativeA panel slides in from a screen edge — usually right or bottom — over a scrim, like pulling out a drawer. Direction carries the spatial metaphor: entering from the edge marks it as a temporary layer, and it exits back the same way, keeping the mental model intact.
MotionUsed with