You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/src/content/docs/components/drawer.mdx
+9-5Lines changed: 9 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,11 +11,15 @@ js: required
11
11
12
12
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.
13
13
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.
0 commit comments