Start building

Platform

Open Source

Resources

Sign in

Drawer

x-drawer

A teleported slide-in panel from the left or right, with header, content and footer slots and optional parent scaling.

php artisan components:add drawer

Examples

Left & right

Slide in from either side, with header, content and footer slots.

<div class="flex min-h-72 w-full flex-wrap items-center justify-center gap-3">
    <x-components.drawer position="right">
        <x-slot:trigger><x-components.button>Open right drawer</x-components.button></x-slot:trigger>
        <x-slot:header>Edit profile</x-slot:header>
        <x-slot:content>
            <div class="grid gap-4">
                <x-components.input label="Name" value="Tony Lea" />
                <x-components.input label="Email" type="email" value="[email protected]" />
                <x-components.toggle label="Public profile" checked />
            </div>
        </x-slot:content>
        <x-slot:footer>
            <x-components.button variant="ghost" x-on:click="open = false">Cancel</x-components.button>
            <x-components.button x-on:click="open = false">Save changes</x-components.button>
        </x-slot:footer>
    </x-components.drawer>

    <x-components.drawer position="left">
        <x-slot:trigger><x-components.button variant="outline">Open left drawer</x-components.button></x-slot:trigger>
        <x-slot:header>Navigation</x-slot:header>
        <x-slot:content>
            <nav class="grid gap-1">
                <a href="#" class="rounded-medium px-3 py-2 text-sm text-foreground/80 hover:bg-secondary">Dashboard</a>
                <a href="#" class="rounded-medium px-3 py-2 text-sm text-foreground/80 hover:bg-secondary">Projects</a>
                <a href="#" class="rounded-medium px-3 py-2 text-sm text-foreground/80 hover:bg-secondary">Settings</a>
            </nav>
        </x-slot:content>
    </x-components.drawer>
</div>

Props

Prop Type Default Description
position select right · left right Which side the drawer slides in from.
open boolean false Whether the drawer is open on load.
parent text — Optional CSS selector of an element to subtly scale/dim while the drawer is open.
zIndex text 50 The stacking z-index for the overlay.
header text — Header content. Can also be provided via the `header` named slot.
content text — Main content. Can also be provided via the `content` named slot.
footer text — Footer content, usually actions. Can also be provided via the `footer` named slot.

Slots

Slot Description
slot Fallback trigger content when no `trigger` slot is given.
trigger The element that opens the drawer (default slot).
header Sticky header area.
content Main scrollable content.
footer Sticky footer, usually actions.

Works with

`components:add drawer` pulls these in automatically.

x-button Button