Drawer (UI)
A panel that slides in from an edge and leaves the page behind it visible — for work that needs the context it came from.
UI ComponentsA drawer enters from an edge and sits over the page without hiding it. That single property is the whole reason to choose one: the user can still see the row, the record, or the list they opened it from. Reviewing a record while the table stays visible, editing an item while comparing it to its neighbours, filtering while watching results update — these are drawer jobs, and a modal would break all three by covering the thing being worked against.
Drawers inherit most of a modal's obligations and one of its own. Focus management, Escape to close, and a visible close control still apply. The extra question is whether the page behind stays interactive. If it does, the drawer must not trap focus, and the user needs to understand that clicking a different row swaps the drawer's contents rather than opening a second one. Decide this deliberately — half-implemented, it produces a panel that neither blocks nor updates.
Drawer vs modal
Ask whether the user needs the page to answer. If yes, drawer. If the answer is a hard stop — delete this, confirm that — use a modal, because keeping the page visible and clickable behind a destructive confirmation is not a kindness.
In practice
A support tool opened each ticket in a modal. Agents kept closing it to check the queue for related tickets from the same customer, then reopening. Switching to a right-side drawer that left the queue visible and swapped contents on row click cut average handling time by roughly 20 seconds a ticket — at their volume, about an hour a day per agent.
Where teams get it wrong
- Drawers that cover the content they were opened from, which removes the only reason to use one.
- A drawer wide enough to be a page. Past roughly half the viewport, ship a route with a URL.
- No URL for the open drawer, so a record a colleague is looking at cannot be linked.
- Opening a second drawer on top of the first.
- On mobile, a side drawer where a bottom sheet fits the reach and the gesture vocabulary better.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a drawer and a modal?
A drawer leaves the page behind it visible and usually usable; a modal blocks it. Choose a drawer when the user needs the underlying context to do the work, and a modal when the decision must happen before anything else.
Should a drawer have its own URL?
If it holds a record, yes. Encoding the open item in the URL makes the view shareable, survives a refresh, and makes browser back do what users expect instead of leaving the page.
Which side should a drawer open from?
Right for detail and editing, matching the reading direction of the row that opened it. Left is conventionally navigation. On mobile, a bottom sheet beats a side drawer for anything requiring input.
Related terms
All terms- Modal DesignDesigning dialogs that block the page to demand a decision — when one is justified, what it must contain, and how a person gets out.
- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
- Sidebar NavigationA vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.
- PopoverA small overlay anchored to the control that opened it, holding content or actions without blocking the page.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us