component · navigation
Drawer
also called navigation drawer (material), side panel, side sheet (material)
A panel docked to one edge of the screen that slides in over the content, holding navigation or the details of the thing you selected.
The edge is the definition. A drawer arrives from the side (or the bottom, on phones), which is what makes it feel like part of the layout rather than an interruption: it can be pushed open beside the content, or laid over it with a scrim when the screen is narrow.
Because it is roomy and dismissible, a drawer is the usual home for two things: the navigation that will not fit on a small screen, and the details of a row you selected in a list. The second use is the one that keeps people in flow, since the list stays where it was and the panel does the changing.
Against a modal dialog: both can dim the page, but a modal asks a question and a drawer holds a place. If the panel can stay open while you work, it is a drawer. Note that Material calls the details variant a “side sheet” and reserves “navigation drawer” for the menu case.
The word people reach for when they mean where the panel waits is off canvas: that is the layout technique of parking a region outside the viewport, and a drawer is the component most often parked that way.
Which word?
| If you want | say |
|---|---|
| a panel that slides in from an edge and can stay open | drawer |
| a window that blocks the page until it is dealt with | modal dialog |
| choices for an action you just started, on a phone | action sheet |
| two panes where one drives the other | split view |
| navigation that lives beside the content, not above it | sidebar |
| a panel that rises from the bottom edge | bottom sheet |
| help opens beside the form instead of on top of it | help drawer |
| the small basket panel that opens from the cart icon | mini cart |
Related
Contains: Grabber
See also: Hamburger menu · Navigation rail · Off canvas
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Navigation drawer |
| shadcn | Drawer |
| carbon | Side panel |