Drawer

Display supporting content in a panel that enters from any edge of the viewport. Drawers work well for filters, forms, record details, and short workflows that should not replace the current page.

Open drawer

<x-bladewind::drawer name="customer-details" position="right" size="medium" show-close-button="false">
    <div class="relative rounded-2xl bg-white p-6 text-center shadow dark:bg-dark-800">
        <button type="button" onclick="hideDrawer('customer-details')" class="absolute right-4 top-4 text-gray-400">
            <x-bladewind::icon name="x-mark" />
        </button>

        <div class="relative mx-auto w-fit">
            <x-bladewind::avatar image="/path/to/image" size="big" />
            <span class="absolute bottom-0 right-0 rounded-full bg-green-500 text-white ring-2 ring-white">
                <x-bladewind::icon name="check" />
            </span>
        </div>

        <p class="font-bold">Victoria Ferguson</p>
        <p class="text-gray-400">victoria@ferguson.eu</p>

        <!-- role / team, then mail / chat / phone action buttons -->
    </div>

    <!-- address details list -->
</x-bladewind::drawer>

Positions

Use left, right, top, or bottom. These are physical viewport edges, so left and right remain predictable in RTL pages.

<x-bladewind::drawer name="filters" position="left" title="Filters">...</x-bladewind::drawer>
<x-bladewind::drawer name="details" position="right" title="Details">...</x-bladewind::drawer>
<x-bladewind::drawer name="notice" position="top" title="Notice">...</x-bladewind::drawer>
<x-bladewind::drawer name="actions" position="bottom" title="Actions">...</x-bladewind::drawer>

Sizes

Sizes are adapted to the drawer direction. Left and right drawers change width. Top and bottom drawers change height. Available values are tiny, small, medium, big, large, xl, and omg.

<x-bladewind::drawer name="profile" size="large" title="Profile">...</x-bladewind::drawer>

Modal and Non-modal Behaviour

A drawer is modal by default. It has a backdrop, traps focus, and prevents background scrolling. Set modal="false" for supporting content that should leave the page interactive.

<x-bladewind::drawer name="help" title="Help" modal="false">...</x-bladewind::drawer>

Header and Footer Slots

Use the named header and footer slots to customize those regions while keeping the drawer layout and scrolling behavior.

Edit customer

<x-bladewind::drawer name="edit-customer">
    <x-slot:header>Custom header</x-slot:header>
    Form content
    <x-slot:footer>Custom footer</x-slot:footer>
</x-bladewind::drawer>

Icons and Close Controls

Set icon, icon-type, and icon-dir using the Icon component contract. Set show-close-button="false" when another clear close action is present.

Open icon drawer

<x-bladewind::drawer name="security" title="Security settings"
    icon="shield-check" icon-type="solid" show-close-button="false">...</x-bladewind::drawer>

Backdrop and Escape Options

Backdrop clicks and the Escape key close a modal drawer by default. Disable either behavior for a workflow that requires an explicit decision. Always provide a visible close action.

<x-bladewind::drawer name="approval" title="Approve request"
    backdrop-can-close="false" escape-can-close="false">
    ...
    <x-slot:footer>
        <x-bladewind::button onclick="hideDrawer('approval')">Cancel</x-bladewind::button>
    </x-slot:footer>
</x-bladewind::drawer>

Programmatic Show, Hide, and Toggle

The three public helpers accept the drawer name and return false when no matching state change can be made.

showDrawer('customer-details');
hideDrawer('customer-details');
toggleDrawer('customer-details');

The drawer also emits bladewind:drawer-opened and bladewind:drawer-closed events. Each event bubbles and includes the drawer name in event.detail.name.

Long and Scrollable Content

The body region scrolls independently while the header and footer remain visible.

Open long content

Responsive, Dark Mode, and RTL

On narrow screens, side drawers never exceed the viewport width. The component uses the active dark theme automatically and respects reduced motion preferences. Left and right refer to physical edges in both LTR and RTL documents.

Accessibility and Focus Management

Modal drawers render with dialog semantics and aria-modal="true". The title labels the drawer and the description is connected with aria-describedby. If there is no title, provide aria-label or aria-labelledby.

Opening moves focus to the first focusable control, or to the panel when there are no controls. Modal focus stays inside the active drawer. Closing restores focus to the control that opened it. When drawers are stacked, Escape affects only the top drawer.

Full List of Attributes

Slots

JavaScript API

Drawer with all attributes defined

<x-bladewind::drawer
    name="customer-profile"
    title="Customer profile"
    description="Review the customer record before saving changes."
    position="right"
    size="large"
    modal="true"
    open="false"
    show-close-button="true"
    close-label="Close customer profile"
    backdrop-can-close="false"
    escape-can-close="false"
    icon="user-circle"
    icon-type="solid"
    icon-dir=""
    class="customer-profile-drawer">
    Customer profile content
</x-bladewind::drawer>