Drawer

A collapsible drawer navigation component with mobile toggle support.

The drawer provides a responsive navigation panel that can be toggled open/closed. It supports mobile overlay mode, desktop persistent mode, collapsible submenus, and active page highlighting. By default, drawers are closed on desktop and require a drawer_trigger or programmatic control to open.

Basic Drawer

Click the menu button to toggle the drawer. The drawer slides in from the left. Click anywhere outside the drawer to close it.

Basic Drawer

Main content area

Click the Menu button to toggle the drawer.

Click outside the drawer to close it.

    <.drawer_trigger for="main-drawer" />
<.drawer id="main-drawer">
  <:header>
    <div class="flex items-center gap-2 p-4">
      <span class="font-semibold">My App</span>
    </div>
  </:header>

  <.drawer_group label="Navigation">
    <.drawer_item href="/" current>Home</.drawer_item>
    <.drawer_item href="/dashboard">Dashboard</.drawer_item>
    <.drawer_item href="/settings">Settings</.drawer_item>
  </.drawer_group>
</.drawer>

# Or initially open on desktop
<.drawer_trigger for="main-drawer" />
<.drawer id="main-drawer" open>
  ...
</.drawer>

  

With Collapsible Submenu

Use drawer_submenu for collapsible sections within the drawer.

Collapsible Submenu

Main content area

Click the Menu button to toggle the drawer.

    <.drawer_trigger for="nav-drawer" />
<.drawer id="nav-drawer">
  <.drawer_group label="Navigation">
    <.drawer_item href="/">Overview</.drawer_item>

    <.drawer_submenu label="Projects" open>
      <.drawer_item href="/projects/active">Active</.drawer_item>
      <.drawer_item href="/projects/archived">Archived</.drawer_item>
    </.drawer_submenu>

    <.drawer_item href="/team">Team</.drawer_item>
  </.drawer_group>
</.drawer>

  

With Header and Footer

Add header and footer slots for branding and secondary actions.

Header and Footer

Main content area

Drawer has header branding, content sections, and a footer with settings.

    <.drawer_trigger for="app-drawer" />
<.drawer id="app-drawer">
  <:header>
    <div class="flex items-center gap-2 p-4">
      <img src="/logo.svg" class="w-8 h-8" />
      <span class="font-semibold">My App</span>
    </div>
  </:header>

  <.drawer_group label="Main">
    <.drawer_item href="/">Home</.drawer_item>
    <.drawer_item href="/projects">Projects</.drawer_item>
  </.drawer_group>

  <:footer>
    <.drawer_item href="/settings">Settings</.drawer_item>
  </:footer>
</.drawer>

  

Drawer Trigger

Use drawer_trigger to create a toggle button for the drawer.

Trigger Variants

Each trigger controls a different drawer:

Ghost → Left drawer

Outline → Right drawer

    # Default icon trigger (hamburger menu)
<.drawer_trigger for="main-drawer" />

# With outline variant
<.drawer_trigger for="main-drawer" variant="outline">
  <.icon name="lucide-menu" class="size-4" />
</.drawer_trigger>

# Different sizes
<.drawer_trigger for="main-drawer" size="sm" />
<.drawer_trigger for="main-drawer" size="lg" />

# Available variants: primary, secondary, destructive, outline, ghost, link

  

Programmatic Control

Control the drawer state from JavaScript using custom events:

    Programmatic Control
  

    // Toggle drawer
document.dispatchEvent(new CustomEvent('sutra-ui:drawer', {
  detail: { id: 'main-drawer' }
}));

// Open drawer
document.dispatchEvent(new CustomEvent('sutra-ui:drawer', {
  detail: { id: 'main-drawer', action: 'open' }
}));

// Close drawer
document.dispatchEvent(new CustomEvent('sutra-ui:drawer', {
  detail: { id: 'main-drawer', action: 'close' }
}));

  

Accessibility

The drawer component includes comprehensive accessibility features:

Uses semantic <aside> and <nav> elements
Proper ARIA labels and aria-hidden state
Sets inert attribute when closed to prevent keyboard navigation
Active page links marked with aria-current="page"
Click outside to close functionality