Drawer

The <aura:drawer> component creates a sliding panel that appears from the left or right side of the screen. It’s ideal for sidebars, menus, forms, or contextual content. Drawers can be triggered from the frontend (no backend request) or backend (with data fetching), offering customizable sizes, positions, and behaviors.

Overview

Drawers slide in from the screen’s edge by default, supporting various sizes, close buttons, dismissible behavior, and nesting. Use show-modal for simple frontend triggering or a backend ModalComponent class with $this->showModal() for dynamic content. The new card attribute detaches the drawer from the edge, giving it a floating appearance.

Attributes

Attribute: name
- Type: String
- Description: Unique identifier for opening/closing the drawer
- Default: Required
Attribute: size
- Type: String
- Description: Drawer width (e.g., sm, lg, full)
- Default: md
Attribute: closeable
- Type: Boolean
- Description: Shows a close button if true
- Default: true
Attribute: dismissible
- Type: Boolean
- Description: Closes on outside click if true
- Default: true
Attribute: position
- Type: String
- Description: Side of appearance: left or right
- Default: left
Attribute: card
- Type: Boolean
- Description: Detaches drawer from edge if true
- Default: false
Attribute: title
- Type: String
- Description: Drawer header title
- Default: Optional

Drawer Sizes

Control the drawer’s width with the size attribute:

sm - Small
md - Medium (default)
lg - Large
xl - Extra Large
2xl - 2x Large
3xl - 3x Large
4xl - 4x Large
5xl - 5x Large
6xl - 6x Large
7xl - 7x Large
full - Full-screen width

Frontend Triggered Drawer

For simple drawers without backend logic, use show-modal on a button:

Copy to clipboard

<aura:button variant="primary" text="Show Settings" show-modal="settings-drawer" />

<aura:drawer name="settings-drawer" title="Settings" size="md">
    <aura:fieldset legend="User Preferences">
        <aura:toggle label="Dark Mode" />
        <aura:toggle label="Notifications" checked />
    </aura:fieldset>

    <x-slot:actions>
        <aura:button variant="outline" text="Cancel" hide-modal="settings-drawer" />
        <aura:button variant="solid" text="Apply" />
    </x-slot:actions>
</aura:drawer>

show-modal="settings-drawer" opens the drawer instantly.
hide-modal="settings-drawer" closes it without a backend request.

Backend Triggered Drawer

For drawers needing backend logic (e.g., data fetching), use a ModalComponent class. Bind the drawer’s name with :name="$name" and trigger it with $this->showModal().

Example

Backend (PHP Component)

Copy to clipboard

class UserMenuDrawer extends ModalComponent
{
    public string $name = 'user-menu-drawer';

    public $user;

    public function loadUserMenu()
    {
        $this->user = User::find(1); // Fetch user data
        $this->showModal();          // Open drawer from backend
    }

    public function logout()
    {
        // Logout logic
        $this->hideModal();          // Close drawer from backend
    }
}

Frontend (Template)

Copy to clipboard

<aura:button variant="primary" text="User Menu" show-modal="user-menu-drawer" />

<aura:drawer name="user-menu-drawer" title="User Menu" position="right">
    <aura:avatar src="path/to/avatar.jpg" size="lg" />
    <aura:p>John Doe</aura:p>
    <x-slot:actions>
        <aura:button variant="solid" text="Logout" hide-modal="user-menu-drawer" />
    </x-slot:actions>
</aura:drawer>

Drawer Size and Position Examples

Copy to clipboard

<aura:button variant="primary" text="Filter Products" show-modal="filter-drawer" />

<aura:drawer name="filter-drawer" size="sm" position="left" title="Filters">
    <aura:select label="Category" :options="['Electronics', 'Clothing', 'Books']" />
    <aura:input label="Max Price" type="number" placeholder="100" />
</aura:drawer>

Error rendering component

Copy to clipboard

<aura:button variant="primary" text="View Cart" show-modal="cart-drawer" />

<aura:drawer name="cart-drawer" size="lg" position="right" title="Your Cart">
    <aura:list>
        <aura:list-item title="Laptop" subtitle="$999" />
        <aura:list-item title="Mouse" subtitle="$29" />
    </aura:list>
</aura:drawer>

Card Drawer

Use the card attribute to detach the drawer from the screen edge, giving it a floating card-like appearance:

Copy to clipboard

<aura:button variant="primary" text="Quick Info" show-modal="info-drawer" />

<aura:drawer name="info-drawer" size="md" position="right" card title="Info">
    <aura:p>This drawer floats away from the edge!</aura:p>
    <x-slot:actions>
        <aura:button variant="solid" text="Got It" hide-modal="info-drawer" />
    </x-slot:actions>
</aura:drawer>

Default: false (attached to edge).
Set card or :card="true" to detach.

Closeable Drawer

Add a close button with closeable:

Copy to clipboard

<aura:button variant="primary" text="View Details" show-modal="details-drawer" />

<aura:drawer name="details-drawer" title="Details" closeable position="left">
    <aura:p>Click the close button or outside to dismiss.</aura:p>
</aura:drawer>

Default: true (close button visible).
Set :closeable="false" to hide it.

Dismissible Drawer

Allow closing by clicking outside with dismissible:

Copy to clipboard

<aura:button variant="primary" text="Edit Profile" show-modal="profile-drawer" />

<aura:drawer name="profile-drawer" title="Edit Profile" :dismissible="false">
    <aura:input label="Username" placeholder="johndoe" />
    <x-slot:actions>
        <aura:button variant="solid" text="Save" />
    </x-slot:actions>
</aura:drawer>

Default: true (outside click closes it).
Set :dismissible="false" to require explicit closure.

Nested Drawers

Create nested drawers for layered interactions:

Copy to clipboard

<aura:button variant="primary" text="Browse Menu" show-modal="menu-drawer" />

<aura:drawer name="menu-drawer" size="md" position="left" title="Menu" closeable>
    <aura:p>Select an option:</aura:p>
    <aura:button variant="outline" text="Submenu" show-modal="submenu-drawer" />
</aura:drawer>

<aura:drawer name="submenu-drawer" size="sm" position="right" title="Submenu" closeable>
    <aura:p>Additional options here.</aura:p>
</aura:drawer>

Key Usage Notes

Frontend (show-modal): Use for static drawers with no backend interaction. No request is made.
Backend ($this->showModal()): Use for dynamic drawers requiring server-side logic. Bind with :name="$name".
Card Mode: Set card to create a floating drawer detached from the edge.
Use $this->hideModal() to close programmatically from the backend, with optional beforeShow() or beforeHide() hooks for additional logic.

Best Practices

Assign unique name values to avoid conflicts.
Use backend triggering for drawers with dynamic or user-specific content.
Keep nested drawers minimal to ensure a smooth user experience.
Leverage the card attribute for visually distinct, floating drawers.

This documentation mirrors the modal’s functionality, incorporates the card attribute, and provides cleaner, more practical examples with a focus on real-world use cases like settings, filters, and menus. Let me know if you need further refinements!

Home