Kit parts

Drawer

A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by.

On this page

Anatomy
Variants
States
Props and options
Usage notes
Accessibility
Related parts

Seats open in 11 days. Want one email that morning?

Anatomy

The browser’s dialog does the hard parts: the top layer, the backdrop, the inert page, the focus trap and the return of focus. The plate is the kit’s face, bolted to an edge (its corners are square where it meets the frame and round where it faces the page) and its shadow falls toward the page. The grip is a slot cut into the inner edge with two ribs standing in it.

Variants

From the right · the default
From the left
From the bottom
From the top
With a foot · one contrast key

States

Right
Left
Bottom
Top

Props and options

Name	Kind	Description
data-edge	attribute	Which edge it comes from. Right is the default.
data-drawer-open · data-drawer-close	attribute	On any element: opens that drawer; closes the one it is in, with an optional returnValue.
data-lock	attribute	A click on the scrim no longer closes it. Escape still does; intercept cancel to stop that too.
openDrawer(d) · closeDrawer(d, value)	function	showModal() and close(), safe to call when already in that state.
Escape	keyboard	Closes it; focus returns to the key that opened it.
Tab · Shift Tab	keyboard	Cycle inside it: the page behind is inert while it is open.

Usage notes

Open a drawer from any edge. Escape, the scrim, the close key or a drag on the grip put it away; focus goes back to the key you used.

Escape closes it.
The page behind stops scrolling while it is open, so a wheel or a swipe over the drawer never moves what is under it.
The slide is a transform and a fade of the scrim; with reduced motion the drawer simply appears and disappears.
Drawers do not open other drawers: a second layer of modal is a page.