Drawer
An edge-anchored panel for side drawers, filters, and quick captures.
Basic
A trigger opens the panel via data-stisla-drawer-trigger="<id>". The panel itself is a .drawer with an optional .drawer__header, a .drawer__body, and an optional .drawer__footer. The dismiss control is .drawer__close, an inline ghost icon button at the trailing edge of the header row. Default placement is the right edge.
Keyboard
In the default modal mode, focus is trapped inside the drawer while it's open. On open, focus lands on the first element marked autofocus, falling back to .drawer__close; on close, focus returns to the trigger that opened it. Non-modal drawers (the No backdrop variant) skip the focus trap so the rest of the page stays reachable.
- Tab: cycle focus forward through focusable controls (wraps to the first in modal mode)
- Shift + Tab: cycle focus backward (wraps to the last in modal mode)
- Escape: dismiss the drawer (unless the backdrop is static, see Static backdrop below)
Placements
Four modifiers anchor the panel to a viewport edge. .drawer--start slides in from the left, .drawer--end from the right, .drawer--top from above, .drawer--bottom from below. Start and end take a fixed width, top and bottom take a fixed height. Bare .drawer behaves as end.
Floating
Add .drawer--floating to detach the panel from the viewport. It gains a gap on every side, rounded corners, and a full border so it reads as a raised card instead of a flush sheet. The modifier stacks onto any placement. Tune the breathing room with --drawer-gap and the corners with --drawer-radius.
Sized
Override --drawer-width (start/end) or --drawer-height (top/bottom) inline on the root to retune a single instance. The default width is 22rem; this one widens to 28rem for a roomier form layout.
Body scroll allowed
Set data-stisla-drawer-scroll="true" to let the page behind keep scrolling while the panel is open. Useful for activity feeds or reference panels that support the main task without interrupting it.
Static backdrop
Set data-stisla-drawer-backdrop="static" and data-stisla-drawer-keyboard="false" to force a deliberate dismiss. The backdrop click shakes the panel along its slide axis instead of closing. Explicit dismiss controls still close.
No backdrop
Set data-stisla-drawer-backdrop="false" to drop the dim entirely so the panel sits alongside the main content. Pair with data-stisla-drawer-scroll="true" for filter panels and inspector strips the user wants to keep open while they read or click around.
Events
Four events fire on the .drawer root. The opening and closing events are cancelable.
stisla:drawer:opening fires before the panel slides in. Call preventDefault() to abort.
stisla:drawer:opened fires once the open transition lands and focus is in place.
stisla:drawer:closing fires before the panel slides out. Call preventDefault() to keep it open.
stisla:drawer:closed fires once the panel is fully hidden and (in modal mode) focus has returned to the trigger.
Customization
Override these on the .drawer root (or globally) to retune a single instance.
Geometry
| Variable | Use |
|---|---|
--drawer-width | Panel width for --start and --end (default). |
--drawer-height | Panel height for --top and --bottom. |
--drawer-padding-block | Top and bottom padding of the header and body. |
--drawer-padding-inline | Left and right padding of the header and body. |
--drawer-gap | Breathing room around the panel under --floating. |
--drawer-z-index | Stack level. One tier below dialog. |
Surface
| Variable | Use |
|---|---|
--drawer-bg | Panel fill. |
--drawer-color | Panel text color. |
--drawer-border-width | Inner-edge border thickness; set 0 to drop it. |
--drawer-border-color | Inner-edge border (only the side facing the viewport). |
--drawer-radius | Corner radius under --floating. |
--drawer-shadow | Soft ambient shadow around the panel. |
Backdrop
| Variable | Use |
|---|---|
--drawer-backdrop-bg | Dim color over the page behind. |
--drawer-backdrop-blur | Backdrop blur radius. |
Title
| Variable | Use |
|---|---|
--drawer-title-font-size | Pins the title size so any heading tag reads the same. |
--drawer-title-font-weight | Title weight. |
Close chip
| Variable | Use |
|---|---|
--drawer-close-size | Width and height of the dismiss chip. |
--drawer-close-color | Resting icon color. |
--drawer-close-color-hover | Hover and focus icon color. |
--drawer-close-bg-hover | Hover and focus chip background. |
Footer
| Variable | Use |
|---|---|
--drawer-footer-padding-block | Top and bottom padding for the footer band. |
--drawer-footer-bg | Footer fill. Tints to the alt surface so the seam reads against the body. |
--drawer-footer-border-color | Top border of the footer band. |
Motion
| Variable | Use |
|---|---|
--drawer-transition-duration | Slide and backdrop fade duration. Zeroed under prefers-reduced-motion: reduce. |