Drawer
A contextual side workspace for secondary tasks that need room without leaving the page.
Definition
Definition
A drawer is a panel that slides in from the edge of the screen, keeping the page underneath visible and reachable.
Problem it solves
Problem it solves
A drawer gives a secondary task room to breathe without hiding what the user was doing. It's the right amount of space when a popover would feel cramped and a modal would cut the user off from the page entirely.
When to use it
When to use it
- Filter panels
- Editing object properties
- Carts and detailed inspectors
When not to use it
When not to use it
- The task is the primary journey
- The content is a single compact control
Example
Example
- 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>Counter-example
Counter-example
A checkout flow built entirely inside a drawer is a common misstep. Payment, shipping, and confirmation don't fit a narrow side panel — the task has become the main journey and deserves its own page.
Questions to ask yourself
Questions to ask yourself
- 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?
Related patterns