Skip to content

Overview

The <x-aura::drawer> component renders a slide-out panel that appears from any edge of the viewport. It supports configurable position, size, an overlay backdrop, optional title and footer slots, and smooth enter/leave transitions. Drawers can be opened via the trigger slot or through Alpine.js $dispatch events using a unique name identifier.

Basic Usage

Drawer Title

This is the drawer content. Click the X or press Escape to close.

<!-- Using the trigger slot -->
<x-aura::drawer title="Drawer Title">
    <x-slot:trigger>
        <x-aura::button>Open Drawer</x-aura::button>
    </x-slot:trigger>
    <p>This is the drawer content.</p>
</x-aura::drawer>

<!-- Using dispatch events (button must be inside an Alpine scope) -->
<x-aura::drawer name="my-drawer" title="Drawer Title">
    <p>This is the drawer content.</p>
</x-aura::drawer>

<div x-data>
    <button x-on:click="$dispatch('open-drawer', 'my-drawer')">
        Open Drawer
    </button>
</div>

Props

Prop Type Default Description
name string null Unique identifier for the drawer. Used with dispatch events to open/close.
title string|null null Title text displayed in the drawer header.
position string 'right' Edge the drawer slides from: left, right, top, bottom.
size string 'md' Width (left/right) or height (top/bottom): sm, md, lg, xl, full.
overlay bool true Show a backdrop overlay behind the drawer.
closeable bool true Whether clicking the overlay or pressing Escape closes the drawer.

Slots

Slot Description
Default The main body content of the drawer.
trigger Optional trigger element. Clicking it opens the drawer without dispatch events.
footer Footer section below the body, typically used for action buttons.

Events

Event Payload Description
open-drawer string (name) Opens the drawer matching the given name.
close-drawer string (name) Closes the drawer matching the given name.

Variants / Examples

Settings

<x-aura::drawer name="right-drawer" title="Settings" position="right" size="md">
    <div class="space-y-4">
        <x-aura::input label="Display Name" wire:model="displayName" />
        <x-aura::toggle label="Email Notifications" wire:model="notifications" />
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-aura::button variant="ghost" x-on:click="$dispatch('close-drawer', 'right-drawer')">Cancel</x-aura::button>
            <x-aura::button variant="primary" wire:click="save">Save</x-aura::button>
        </div>
    </x-slot:footer>
</x-aura::drawer>

Left Navigation Drawer

<x-aura::drawer name="nav-drawer" title="Navigation" position="left" size="sm">
    <nav class="space-y-2">
        <a href="{{ route('dashboard') }}" class="block px-3 py-2 rounded-lg hover:bg-aura-surface-100">Dashboard</a>
        <a href="{{ route('projects') }}" class="block px-3 py-2 rounded-lg hover:bg-aura-surface-100">Projects</a>
        <a href="{{ route('settings') }}" class="block px-3 py-2 rounded-lg hover:bg-aura-surface-100">Settings</a>
    </nav>
</x-aura::drawer>

Top Notification Drawer

Notifications

New You have 3 unread messages.
Done Deployment completed successfully. 
<x-aura::drawer name="top-drawer" title="Notifications" position="top" size="sm">
    <div class="space-y-3">
        @foreach($notifications as $notification)
            <div class="flex items-center gap-3 p-3 bg-aura-surface-50 rounded-lg">
                <x-aura::badge :variant="$notification->variant" dot>{{ $notification->label }}</x-aura::badge>
                <span class="text-sm">{{ $notification->message }}</span>
            </div>
        @endforeach
    </div>
</x-aura::drawer>

Accessibility

  • The drawer traps focus within its content when open.
  • Pressing the Escape key closes the drawer when closeable is true.
  • The close button includes aria-label="Close" for screen readers.
  • The overlay prevents interaction with background content while the drawer is open.