# 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.

Kit part · With the Kit · https://tactileui.dev/parts/drawer

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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.

## Accessibility

- 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.

## Related parts

- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
- [Popover](https://tactileui.dev/parts/popover): A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
- [Command palette](https://tactileui.dev/parts/command): Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.