ComponentCraft conventionIntermediate
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 page
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.
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.
- ElevationUI foundation
- Figure and GroundUI foundation
- MotionUI foundation
Often used with
These usually appear in the same screen or the same decision.
- Mobile Interaction PatternsPattern
- NavigationPattern
Alternative approach
A different answer to the same problem, with a different cost.
- Modal DialogComponent
Both interrupt. A drawer keeps the context visible behind it.