Drawer component — a sliding panel that enters from any edge of the screen.

A drawer provides access to supplementary content or actions without leaving the current page. Unlike Sheet, the Drawer is designed for content-heavy panels and uses its own dedicated PhiaDrawer JavaScript hook (rather than sharing PhiaDialog) with CSS transform animations for the enter/exit motion.

When to use Drawer vs Sheet

Use Drawer when you want a dedicated trigger button colocated with the content and a simpler, content-driven panel. Use Sheet when state from the server controls open/close or when you need the richer ARIA sub-components.

Hook Registration

Copy the hook via mix phia.add drawer, then register it in app.js:

# assets/js/app.js
import PhiaDrawer from "./hooks/drawer"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaDrawer }
})

Sub-components

Directions

Example — Settings Drawer (right)

The canonical drawer pattern: a button triggers a right-side panel.

<.drawer id="settings-drawer">
  <.drawer_trigger drawer_id="settings-drawer">
    <.button>
      <.icon name="settings" class="mr-2" />
      Settings
    </.button>
  </.drawer_trigger>

  <.drawer_content id="settings-drawer-content" direction="right">
    <.drawer_header>
      <h2 id="settings-drawer-content-title" class="text-lg font-semibold">
        Settings
      </h2>
      <p class="text-sm text-muted-foreground">
        Manage your account preferences.
      </p>
    </.drawer_header>
    <.drawer_close />
    <div class="p-6 space-y-4">
      <.input name="display_name" label="Display name" value={@user.name} />
      <.select name="timezone" label="Timezone" options={@timezones} />
      <.switch name="email_notifications" label="Email notifications" checked={@user.email_notifs} />
    </div>
    <.drawer_footer>
      <button phx-click="cancel_settings">Cancel</button>
      <button phx-click="save_settings" class="...">Save</.button>
    </.drawer_footer>
  </.drawer_content>
</.drawer>

Example — Mobile Bottom Sheet

A bottom drawer is the mobile-native pattern for action sheets:

<.drawer id="actions-drawer">
  <.drawer_trigger drawer_id="actions-drawer" class="md:hidden">
    <.button variant="outline">Actions</.button>
  </.drawer_trigger>

  <.drawer_content id="actions-drawer-content" direction="bottom">
    <.drawer_header>
      <h2 id="actions-drawer-content-title" class="text-sm font-medium">
        Item Actions
      </h2>
    </.drawer_header>
    <.drawer_close />
    <div class="p-4 pb-8 space-y-2">
      <button phx-click="edit_item" class="w-full text-left px-4 py-3 rounded-md hover:bg-muted">
        Edit
      </button>
      <button phx-click="duplicate_item" class="w-full text-left px-4 py-3 rounded-md hover:bg-muted">
        Duplicate
      </button>
      <button phx-click="delete_item" class="w-full text-left px-4 py-3 rounded-md text-destructive hover:bg-destructive/10">
        Delete
      </button>
    </div>
  </.drawer_content>
</.drawer>

Example — Step-by-Step Form (left drawer)

Multi-step forms work well in a left drawer that feels like an overlay wizard:

<.drawer id="onboarding">
  <.drawer_trigger drawer_id="onboarding">
    <.button>Start Setup</.button>
  </.drawer_trigger>

  <.drawer_content id="onboarding-content" direction="left" open={@show_onboarding}>
    <.drawer_header>
      <h2 id="onboarding-content-title" class="text-lg font-semibold">
        Setup Wizard — Step {@step} of 3
      </h2>
    </.drawer_header>
    <.drawer_close />
    <div class="p-6">
      <%= render_step(@step) %>
    </div>
    <.drawer_footer>
      <button phx-click="prev_step" disabled={@step == 1}>Back</button>
      <button phx-click="next_step">
        {if @step == 3, do: "Finish", else: "Next"}
      </button>
    </.drawer_footer>
  </.drawer_content>
</.drawer>

Server-Controlled Open State

Pass open={@show_drawer} to drawer_content/1 to control visibility from the server (e.g. after a navigation event or background task completion):

<.drawer_content id="notif-content" direction="right" open={@show_notifications}>
  ...
</.drawer_content>

# Push from LiveView
{:noreply, assign(socket, :show_notifications, true)}

Hook Behaviour

The PhiaDrawer hook (mounted on drawer_content/1) handles:

• CSS transform animation (slide in/out) on open/close
• Focus trap — Tab / Shift+Tab cycle within the open panel
• Escape key closes the panel and returns focus to the trigger
• Backdrop click closes the panel
• Focus return — restores focus to drawer_trigger/1 (or last focused element) when the drawer closes

Accessibility

• drawer_content/1 has role="dialog" and aria-modal="true"
• aria-labelledby="{id}-title" is auto-set — give your title heading the id "{drawer-content-id}-title" for the link to resolve
• drawer_close/1 has aria-label="Close drawer" for screen reader users
• Keyboard: focus automatically moves to the first focusable element on open