UI components · Feedback
Drawer
Also called: Sheet, Side panel, Slide-over, Offcanvas, Bottom sheet
A panel that slides in from the edge of the screen, so you can view details or fill in a form without leaving the current page.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstWhen I click a row in the list, slide in a 480px-wide drawer from the right to show its details. Put a title and a close button at the top, and keep "Cancel" and "Save" buttons fixed at the bottom. Clicking the backdrop or pressing Esc closes it. If the content is long, only the middle area scrolls.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Drawer is what you need.
Use Drawer when
- Viewing or editing a single record from a list page while keeping the list in view
- The form has too many fields for a modal but doesn't deserve its own page
- Temporarily showing extra info or a set of filters that close when you're done
- Showing a set of options or an action menu that slides up from the bottom on mobile
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Opening a drawer inside a drawer, stacking them until users don't know which one to close
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Making it as wide as the whole screen, which defeats the point of keeping context
- 03
Turning the permanent main navigation into a drawer that's open by default, so desktop users have to close it every time
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A backdrop layer plus a panel that slides in from the edge. The panel has a title bar, a scrollable content area, and an action bar at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A drawer slides in from the right side of the page (sometimes the left or bottom) and covers part of it, usually with a semi-transparent backdrop behind it. It's taller than a modal and holds more content. The middle content area scrolls on its own, and the action buttons stay fixed at the bottom. shadcn/ui calls it Sheet, Bootstrap calls it Offcanvas, and the mobile version that slides up from the bottom is often called a Bottom Sheet.
How it differs from a Modal: a modal is centered and smaller, good for confirmations or short forms. A drawer hugs the edge and is taller, good for viewing a record's full details or editing a longer form, and part of the original list stays visible so users don't lose context. How it differs from a Sidebar Menu: a sidebar menu is permanent navigation, while a drawer opens temporarily and closes when you're done.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-drawer- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-drawer-content-wrapper.el-drawer[class*="MuiDrawer-paper"]:not([class*="MuiDrawer-paperAnchorDocked"]).arco-drawer.t-drawer__content-wrapper.n-drawer[data-slot="sheet-content"][data-slot="drawer-content"].offcanvas
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026