Drawer and Sheet
A panel that slides in from an edge, keeping context visible while offering more room than a popover.
Definition
A drawer slides in from a screen edge to present secondary content or controls. It can be modal or non-modal, and that choice determines its focus behaviour.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Secondary content that benefits from remaining context.
- Mobile action menus.
- Inspector panels.
Common mistakes
- Focus trapped in a non-modal drawer.
- Gesture-only dismissal.
- Drawers stacked on drawers.
Design decisions
- Modal or not: a modal drawer traps focus and dims the page; a non-modal one leaves the page usable and must not trap focus.
- Edge: side drawers suit navigation and inspectors; bottom sheets suit mobile actions and are reachable by thumb.
- Dismissal: backdrop click, Escape, a visible close control, and a downward swipe for bottom sheets.
- Animation should come from the edge it belongs to, so the spatial model is clear. Honour reduced-motion preferences.
- State persistence: a non-modal inspector should remember its open state across navigation.
Choosing the edge
| Edge | Suits | Watch for |
|---|---|---|
| Left | Primary navigation | Competes with the browser back gesture on some devices |
| Right | Details, filters, inspectors | The natural home for anything about the selected item |
| Bottom | Mobile actions and short forms | Keyboard appearance, which halves the available height |
| Top | Rare. Notifications and search | Collides with system chrome and pull-to-refresh |
In practice
- i.
The filter drawer that stayed open
Why it beats a modalFilters in a right drawer let the reader see the result list change as they adjust. The same filters in a modal hid the very thing being filtered, so every change required a close, a look and a reopen.
- ii.
Swipe to dismiss, and nothing else
Gesture as the only exitA bottom sheet dismissible only by dragging it down was unusable by keyboard and undiscoverable for anyone who had not been taught the gesture. A visible close control is not optional.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Modal Dialog
ComponentAn overlay that traps focus and suspends everything behind it until dismissed.
Key difference
A modal blocks the page until it is answered. A drawer slides in beside the page and leaves the context it came from visible, which makes it the weaker interruption and the better panel.
Use Drawer and Sheet when
- The reader needs the underlying content while they work.
- The panel holds filters, details or a long form.
- They may reasonably leave it open across several actions.
Use Modal Dialog when
- The decision genuinely cannot wait, such as a destructive confirmation.
- The task is short and finishes in one step.
- Seeing the page behind it would not help.
Local chart
CMP·011 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- ElevationFND·048 · UI foundation
- Figure and GroundFND·009 · UI foundation
- MotionFND·052 · UI foundation
Often used with
These usually appear in the same screen or the same decision.
- Mobile Interaction PatternsPAT·027 · Pattern
- NavigationPAT·001 · Pattern