Drawer System

Drawer

Off-canvas surfaces for navigation, filters, and contextual actions. Switch sides, toggle overlays, and nest secondary actions without rebuilding the shell.

Command Palette Drawer

Slide from the left with an overlay. Perfect for navigation menus or project switchers.

side = :left · overlay = true

Global Navigation

Combine trigger slots with tinted overlays so the drawer reads as a premium command palette. Clicking outside or pressing Esc closes it instantly.

Supports Lists, forms, quick actions, and nested sections.
Works with both `:navigate` and `href` triggers.


        <.drawer id="nav-drawer" open={@drawer_open_state} side={:left} overlay={true}>
          <:trigger>
            <span class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-2 text-sm font-semibold text-white">
              <.icon name="hero-bars-3" class="h-4 w-4" />
              Open Drawer
            </span>
          </:trigger>
          <:content>
            <nav class="space-y-2">
              ...
            </nav>
          </:content>
        </.drawer>

Filter Panel Drawer

Slide from the right without an overlay. Perfect for staying co-visible with the page.

side = :right · overlay = false

Live product filters with preview

Disable the overlay so the drawer feels like part of the canvas. Use background blur or border accents to distinguish from the underlying content.

Combine with LiveView streams so filtering results re-render while the drawer stays open.


        <.drawer id="filters-drawer" open={@filters_open?} side={:right} overlay={false}>
          <:trigger>
            <span class="rounded-lg border border-emerald-200 px-4 py-2 text-sm font-semibold text-emerald-600">
              Open Filters
            </span>
          </:trigger>
            <:content>
            ...
          </:content>
            </.drawer>

Props

Prop	Type	Default	Description
side	:left \| :right	:left	Drawer origin. Right-hand drawers pair well with filters or inspector panels.
overlay	boolean	true	Add a dimming layer behind the drawer. Set to false when you want split views.
class	string	""	Extend styling—rounded corners, borders, or custom widths.
trigger	slot	[]	Optional slot; when omitted, manage the drawer with your own actions (phx-click).