--- title: Drawer description: Slide-out panel from screen edge visibility: guest draft: false --- # Drawer The `` component creates accessible side panels that slide in from any edge of the screen. Drawers share the same overlay behavior as modals (focus trap, scroll lock, events) but use slide transitions. ## Usage :::preview{title="Drawer Panel"}
Settings Settings form content goes here... Cancel Save Open Drawer
::: :::source{language="blade"} Settings Settings form content goes here... Cancel Save Open Drawer ::: ## Width & Layout Drawer width (for `left`/`right`) or height (for `top`/`bottom`) is controlled by the `size` prop: | Size | Left/Right Width | Top/Bottom Height | | --- | --- | --- | | `sm` | 20rem (320px) | 30vh | | `md` | 24rem (384px) | 40vh | | `lg` | 32rem (512px) | 50vh | | `xl` | 40rem (640px) | 60vh | | `full` | 100% viewport | 100% viewport | ```blade … ``` ## Positions ```blade ``` ## Sizes For `left` and `right` positions, size controls **width**. For `top` and `bottom`, size controls **height**. | Size | Dimension | Value | | --- | --- | --- | | `sm` | Width/Height | 20rem (320px) | | `md` | Width/Height | 28rem (448px) | | `lg` | Width/Height | 40rem (640px) | ```blade ... ``` ## With Livewire `wire:model` ```blade Filters ``` When the user closes the drawer (ESC, backdrop, close button), the Livewire property is automatically set to `false`. ## Keyboard | Key | Action | | --- | --- | | Escape | Close drawer (when `dismissible`) | | Tab / Shift+Tab | Cycle focus within drawer (focus trap) | ## Livewire Integration - `wire:model` syncs drawer open/close state with a Livewire property - `wire:ignore.self` prevents Livewire DOM morphing issues - `wire:navigate` (SPA mode) automatically closes open drawers ## Behavior - **[Focus trap](https://github.com/focus-trap/focus-trap)** (bundled ~3.8 KB) prevents keyboard navigation outside the drawer - **Scroll lock** hides body scrollbar while drawer is open - **Slide transition** direction matches the drawer position - **Teleport** renders drawer at `` level for correct stacking - **Shared overlay logic** with Modal — identical focus trap, scroll lock, and event handling ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `name` | `string` | **required** | Unique drawer identifier | | `position` | `string` | `'right'` | Slide direction: `left`, `right`, `top`, `bottom` | | `size` | `string` | `'md'` | Width (left/right) or height (top/bottom) | | `dismissible` | `bool` | `true` | Whether ESC and backdrop click close the drawer | | `describedby` | `string\|null` | `null` | Element ID referenced by the dialog's `aria-describedby` (wire to ``) | | `label` | `string\|null` | `null` | An explicit accessible name, for a drawer composed **without** ``. Without it such a drawer announces as a bare "dialog". It is a prop rather than something the drawer detects, because the header binds its id through Alpine and is not visible to the parent at render time — which also means the name survives with JavaScript disabled. WCAG 2.1 4.1.2 (Level A). | | `scope` | `string\|null` | `null` | Scoped personalization key | ## Sub-Components | Component | Purpose | | --- | --- | | `drawer.header` | Title area at the top with bottom border + **auto close-X** (dismissible only) | | `drawer.body` | Scrollable content area (uses `flex-1`) | | `drawer.footer` | Action buttons area with top border | | `drawer.close` | Wraps any element to make it close the drawer | ### Auto Close Button Like `modal.header`, `drawer.header` renders a close-X in the top-right corner by default, gated at runtime with `x-show="dismissible"` so non-dismissible drawers stay clean. Opt out with `:close="false"` when you want to control the layout yourself: ```blade
Settings
``` Personalize the button's classes via `WireKit::personalize('drawer.header', ['close' => 'your-classes'])`. ::: info Unlike Modal, Drawer has no `drawer.trigger` sub-component. Drawers are typically triggered from navbars or other locations far from the drawer itself. Use events or `wire:model` to open drawers programmatically. ::: ## Events ### Opening ```blade