DropdownMenu · shadcn/ui for Phoenix LiveView

Basic

A simple menu with items. Click the trigger or press Enter/ArrowDown to open. Arrow keys navigate, Enter/Space activate, Escape closes.

Complex with Sub-menus

Nested sub-menus open on hover or ArrowRight. ArrowLeft closes the sub-menu. Mirrors the shadcn "complex" example.

<.dropdown_menu id="complex-menu">
  <.dropdown_menu_trigger>
    <.button variant="outline">Open</.button>
  </.dropdown_menu_trigger>
  <.dropdown_menu_content class="w-56">
    <.dropdown_menu_item>
      <.icon name="hero-arrow-uturn-left-micro" />
      Back
      <.dropdown_menu_shortcut>⌘[</.dropdown_menu_shortcut>
    </.dropdown_menu_item>
    <.dropdown_menu_item disabled>
      <.icon name="hero-arrow-uturn-right-micro" />
      Forward
      <.dropdown_menu_shortcut>⌘]</.dropdown_menu_shortcut>
    </.dropdown_menu_item>
    <.dropdown_menu_item>
      <.icon name="hero-arrow-path-micro" />
      Reload
      <.dropdown_menu_shortcut>⌘R</.dropdown_menu_shortcut>
    </.dropdown_menu_item>
    <.dropdown_menu_separator />
    <.dropdown_menu_sub>
      <.dropdown_menu_sub_trigger>
        <.icon name="hero-users-micro" />
        More Tools
      </.dropdown_menu_sub_trigger>
      <.dropdown_menu_sub_content>
        <.dropdown_menu_item>
          <.icon name="hero-document-text-micro" />
          Save Page As...
          <.dropdown_menu_shortcut>⇧⌘S</.dropdown_menu_shortcut>
        </.dropdown_menu_item>
        <.dropdown_menu_item>
          <.icon name="hero-folder-micro" />
          Create Shortcut...
        </.dropdown_menu_item>
        <.dropdown_menu_item>
          <.icon name="hero-window-micro" />
          Name Window...
        </.dropdown_menu_item>
        <.dropdown_menu_separator />
        <.dropdown_menu_item>
          <.icon name="hero-wrench-screwdriver-micro" />
          Developer Tools
        </.dropdown_menu_item>
      </.dropdown_menu_sub_content>
    </.dropdown_menu_sub>
    <.dropdown_menu_separator />
    <.dropdown_menu_checkbox_item checked={@status_bar} phx-click="toggle-status-bar">
      Show Bookmarks Bar
      <.dropdown_menu_shortcut>⌘⇧B</.dropdown_menu_shortcut>
    </.dropdown_menu_checkbox_item>
    <.dropdown_menu_checkbox_item checked={@panel} phx-click="toggle-panel">
      Show Full URLs
    </.dropdown_menu_checkbox_item>
    <.dropdown_menu_separator />
    <.dropdown_menu_label inset>People</.dropdown_menu_label>
    <.dropdown_menu_radio_group>
      <.dropdown_menu_radio_item
        :for={person <- ~w(Pedro Colm)}
        checked={@theme == person}
        phx-click="set-theme"
        phx-value-val={person}
      >
        {person}
      </.dropdown_menu_radio_item>
    </.dropdown_menu_radio_group>
  </.dropdown_menu_content>
</.dropdown_menu>

With Shortcuts

Items with keyboard shortcut hints displayed on the right.

Checkbox Items

Toggleable items with server-driven checked state. Menu stays open on toggle.

Server state: status_bar=true, activity_bar=false, panel=true

Radio Group

Single-selection items via radio group and radio items.

Server state: theme=system

With Icons

Items with leading icons.

Destructive Item

Use variant="destructive" for dangerous actions.

Disabled Items

Disabled items are visually dimmed and skipped by keyboard navigation.

Placement

Different side and align combinations. The menu flips if there isn't enough space.

Server-controlled

Server controls open/close state. Uses the :if + show pattern.

Server state: show=false, action=nil