Drawer
It opens a side workspace for a secondary task, without making the page behind disappear.
What a drawer keeps in reach
A drawer slides in from the edge of the screen and opens a side workspace while the page behind stays visible and within reach.
The real job
Make room without losing the page
A drawer gives a secondary task enough room without cutting the user off from what they were doing. Reach for it when a popover starts feeling cramped, but a modal would be more interruption than the job deserves.
Good fit
When the side panel earns its width
- Filter panels
- Editing object properties
- Carts and detailed inspectors
Bad fit
When the drawer becomes the main flow
- The task is the primary journey
- The content is a single compact control
In the wild
What belongs in a drawer
- Product filters
- Property inspector
- Shopping cart
See the technical example
<dialog aria-labelledby="filters-title" className="drawer">
<header>
<h2 id="filters-title">Filters</h2>
<button aria-label="Close filters">×</button>
</header>
<form>{/* filter controls */}</form>
</dialog>Classic trap
Checkout is not a side quest
Running all of checkout inside a drawer is the classic miss. Payment, shipping, and confirmation do not belong in a narrow side panel. At that point, the task is the main flow and it deserves its own page.
Before you choose
A few checks before opening the side panel
- Does the user need to keep seeing the page behind this task?
- Is this task secondary to what the user came here to do?
- Would the content feel cramped in a popover?
- Is this becoming the main journey rather than a side task?
You may need…