Drawer

A panel that slides in from the edge of the screen.

Examples

Slide Direction

Drawers can slide in from any side: left, right, top, or bottom.

blade

<x-plume::button style="outline" x-on:click="$openDrawer('example-drawer-right')">
        Open Right Drawer
    </x-plume::button>
    <x-plume::button style="outline" x-on:click="$openDrawer('example-drawer-left')">
        Open Left Drawer
    </x-plume::button>
    

<x-plume::drawer name="example-drawer-right" side="right" title="Right Drawer"
    description="This drawer slides in from the right.">
    <p class="text-sm">You can put any content here.</p>
    <x-slot:footer>
        <x-plume::button style="outline" class="w-full" x-on:click="close()">Close</x-plume::button>
    </x-slot:footer>
</x-plume::drawer>

<x-plume::drawer name="example-drawer-left" side="left" title="Left Drawer"
    description="This drawer slides in from the left.">
    <p class="text-sm">More content here.</p>
    <x-slot:footer>
        <x-plume::button style="outline" class="w-full" x-on:click="close()">Close</x-plume::button>
    </x-slot:footer>
</x-plume::drawer>

Prop	Type	Default	Description
name	string	null	Unique identifier for the drawer, used with $openDrawer(name).
show	bool	false	Whether to show the drawer by default on page load.
persistent	bool	false	Whether to prevent closing when clicking the backdrop or pressing the ESC key.
side	string	'right'	Side to slide in from: 'left', 'right', 'top', 'bottom'.
maxWidth	string	'sm'	-
title	string	null	Simple title string. For complex headers, use the 'header' slot.
description	string	null	Optional subtitle or description.
onOpen	string	null	AlpineJS expression or function to call when the drawer opens.
onClose	string	null	AlpineJS expression or function to call when the drawer closes.

Usage

Triggering the Drawer

blade

<x-plume::button x-on:click="$openDrawer('my-drawer')">
                    Open Drawer
                    </x-plume::button>

Drawer Component

blade

<x-plume::drawer name="settings-drawer" side="right" title="Settings"
    description="Manage your account preferences.">
    <!-- Main content -->

    <x-slot:footer>
        <x-plume::button style="outline" x-on:click="close()">
            Close
        </x-plume::button>
    </x-slot:footer>
</x-plume::drawer>