Drawer

Also called sheet, side panel, slide-over, bottom sheet, off-canvas

A panel anchored to one edge of the screen that slides into view over the page, usually without hiding it.

Example

Open the filters and tick something — the list underneath updates while the panel stays open. That is the reason to pick a drawer over a modal.

Design team update

The content is secondary to what is on screen — filters, item details, a settings panel, a cart.
The user benefits from seeing the page behind: comparing, referencing, watching a list update as filters change.
There is more content than a modal can hold comfortably, and scrolling inside a panel feels natural.
You are on mobile and the natural gesture is up from the bottom — bottom sheets read as native there.

The decision is blocking or destructive. A drawer's softer presence undersells “this cannot be undone”.
The screen is narrow and the drawer is anchored to the side — it ends up nearly full width, at which point a full page or bottom sheet is clearer.
You would open a drawer from a drawer. Nested panels lose the user just as effectively as stacked modals.
The content is one short sentence. A popover or tooltip does that without the ceremony.

Keeps context visible, so users do not have to remember what they were looking at.
Holds far more content than a modal without feeling cramped.
Matches native patterns on mobile, especially as a bottom sheet with a drag handle.

Weaker sense of urgency — poor fit when the user really must decide something.
Takes horizontal space that a wide layout may need, or covers content it should not.
Drag-to-dismiss is invisible unless you show a handle, and it must never be the only way to close.

What this pattern needs in order to work for everyone.

Keyboard: Escape closes it, exactly as with a modal.
If the drawer blocks the page behind, trap focus inside it. If the page stays interactive, do not trap — but then it is not really modal, and it should not have an overlay.
There must always be a visible close control. Swipe-to-dismiss is an addition, never the only route out.
Roles and state: A blocking drawer is a dialog: `role="dialog"` with `aria-modal="true"`.
A non-blocking drawer is not a dialog — use a `complementary` or plain region, and skip `aria-modal`, which would lie to assistive tech.
Label it with `aria-labelledby` pointing at its heading.
Focus: Decide first whether the drawer is modal, then be consistent. A dimmed overlay with no focus trap is the common bug: it looks blocking to sighted users while keyboard users tab straight into content they cannot see.

Linear — Issue details slide in from the right while the list stays visible, so you can move through items without losing your place.
Google Maps — Place details rise as a bottom sheet, letting the map — the thing you are actually looking at — stay on screen.

Side-by-side breakdowns of patterns that solve a similar problem.

A curated easing library, previewed on things you actually animate.