Skip to content

Commit 25eaf8a

Browse files
committed
Reflect changes in dialog on Drawer
1 parent 4360821 commit 25eaf8a

1 file changed

Lines changed: 9 additions & 5 deletions

File tree

site/src/content/docs/components/drawer.mdx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,15 @@ js: required
1111

1212
Drawer builds on the native `<dialog>` element and our Dialog component to manage hidden sidebars via JavaScript. These sidebars, or drawers, can appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
1313

14-
- Drawer shares a common base with our [Dialog component]([[docsref:/components/dialog]]), leveraging native `<dialog>` APIs for focus trapping, backdrop, and top-layer rendering.
15-
- Drawer uses the `<dialog>` element, which must be used instead of a `<div>`.
16-
- When shown, drawer includes a native `::backdrop` that can be clicked to hide the drawer.
17-
- Only one drawer can be shown at a time.
18-
- Due to how CSS handles animations, you cannot use `margin` or `translate` on an `.drawer` element. Instead, use the class as an independent wrapping element.
14+
- **Drawer shares the same base as [our Dialog component]([[docsref:/components/dialog]])**, using native `<dialog>` APIs for focus trapping, backdrop, and top-layer rendering.
15+
- **Use the `<dialog>` element**, not a `<div>`. Due to how CSS handles animations, don't apply `margin` or `translate` directly to `.drawer` — wrap it if you need those.
16+
- **Modal by default, or scroll-through** — the default opens the drawer modally with a backdrop; set `scroll: true` to render without a backdrop and without locking body scroll.
17+
- **Built-in backdrop** via `::backdrop` (modal only) closes the drawer on click; set `backdrop: "static"` to lock clicks outside, or `backdrop: false` to hide it.
18+
- **Escape key handling** closes the drawer by default; set `keyboard: false` to disable.
19+
- **Swipe to dismiss** — drawer auto-wires a placement-aware swipe (swipe left to close `drawer-start` in LTR, swipe down to close `drawer-bottom`, etc.).
20+
- **Responsive placement**`.sm-drawer`, `.md-drawer`, and up stay drawer-like below their breakpoint and collapse inline above it, making drawers useful as responsive navbars.
21+
- **Only one drawer can be shown at a time** (enforced by the data API).
22+
- **Animated open and close** — drawer slides back out to its placement-specific off-screen position on close, with the `::backdrop` fading alongside it when opened modally. When authoring custom CSS, qualify your `[open]` rules with `:not(.hiding)` so the exit transition can fall through to the base state; add `.drawer-instant` to skip animations.
1923

2024
<Callout name="info-prefersreducedmotion" />
2125

0 commit comments

Comments
 (0)