DRAWER: Side panel overlay for sub-level content
CLASSES: .drawer | .drawer-header | .drawer-title | .drawer-body | .drawer-footer | .drawer-backdrop
VARIANTS: Default (right) | .drawer-start (left) | .drawer-sm | .drawer-lg | .drawer-wide
COMPOSES: Button (.btn, .btn-icon, .btn-tertiary, .btn-primary, .btn-secondary) | Form controls
Drawer slides in from the edge of the screen to display secondary content such as filters, settings, or forms. It overlays the page content and can optionally include a backdrop. Uses existing button components for the close icon and footer actions.
Default: Slides in from the right edge. 480px wide with header, scrollable body, and footer.
The close button reuses .btn .btn-icon .btn-tertiary. Footer buttons reuse
.btn .btn-secondary and .btn .btn-primary.
<div class="drawer"><div class="drawer-header">...</div><div class="drawer-body">...</div><div class="drawer-footer">...</div></div>
.drawer-start: Slides in from the left edge instead of the right. Shadow is mirrored to the right side.
<div class="drawer drawer-start">...</div>
Sizes: .drawer-sm (360px) | default (480px) |
.drawer-lg (600px) | .drawer-wide (720px).
All sizes become full-width on mobile screens (< 640px).
<div class="drawer drawer-sm"> | <div class="drawer drawer-lg"> | <div class="drawer drawer-wide">
No footer: Omit the .drawer-footer section for informational or read-only drawers.
The body expands to fill the remaining space.
<div class="drawer"><div class="drawer-header">...</div><div class="drawer-body">...</div></div>
Overflow: When body content exceeds the available height, the
.drawer-body scrolls independently while the header and footer remain fixed.
No backdrop: Omit the .drawer-backdrop element for drawers that
don't need to dim the background. The drawer still supports Escape key to close.
<!-- Simply omit .drawer-backdrop element -->
Accessibility: The drawer traps focus while open, supports Escape to close, and returns focus to the trigger element on close.
| Key | Action |
|---|---|
Escape |
Close the drawer and return focus to trigger |
Tab |
Move focus to next focusable element (trapped within drawer) |
Shift + Tab |
Move focus to previous focusable element (trapped within drawer) |
Container: .drawer | .drawer.show | .drawer-start | .drawer-sm | .drawer-lg | .drawer-wide
Sections: .drawer-header | .drawer-title | .drawer-body | .drawer-footer
Overlay: .drawer-backdrop | .drawer-backdrop.show
Close button: .btn .btn-icon .btn-tertiary (existing component)
Footer buttons: .btn .btn-secondary | .btn .btn-primary (existing components)
Controller: data-controller="drawer" | data-action="click->drawer#open" | data-action="click->drawer#close"