Drawer
A dialog that slides in from an edge: end by default, or start, or bottom as a sheet.
Examples
Drawer
From the start
Anatomy
dialog.drawer | A native <dialog>, full height and about 29rem wide, fixed to an edge. Opened like any dialog. |
> form[method=dialog] | Optional. Wrap the content so a value="cancel" button closes it. |
API
| Attribute | Values | Description |
|---|---|---|
data-side | startbottom | The edge it slides in from. bottom is full width, as tall as its content up to 85% of the viewport. Default end edge. |
data-light-dismiss | boolean | A click on the backdrop closes it (aequitas.js). Expected on drawers. |
data-open | <selector> | On the opener: aequitas.js calls showModal() on the drawer. |
data-close | <value> | On a control inside: closes the drawer. |
Behaviour
Opens, closes and light-dismisses exactly like Dialog: [data-open], [data-close], data-light-dismiss. Without it, call showModal() and close() yourself.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- A drawer is a modal dialog: give it
aria-labeloraria-labelledbyits heading. - Put a visible close button in it. On touch screens there is no Esc key, and the backdrop is a thin strip on narrow viewports.
| Key | Effect |
|---|---|
| Esc | Closes the drawer (native, as a modal dialog). |
| Tab / ShiftTab | Stays among the drawer's controls; the page behind is inert. |