Dropdown Menu

Dropdown menu with full keyboard navigation and accessibility support.

Basic

    <.dropdown_menu id="my-menu">
  <:trigger>Open Menu</:trigger>
  <.dropdown_item>Profile</.dropdown_item>
  <.dropdown_item>Settings</.dropdown_item>
  <.dropdown_separator />
  <.dropdown_item variant="destructive">Log out</.dropdown_item>
</.dropdown_menu>
  

With Icons

Add icons to menu items for better visual communication.

With Icons

    <.dropdown_menu id="actions-menu">
  <:trigger>Actions</:trigger>
  <.dropdown_item>
    <span class="flex items-center gap-2">
      <.icon name="lucide-user" class="size-4" /> Profile
    </span>
  </.dropdown_item>
  <.dropdown_item>
    <span class="flex items-center gap-2">
      <.icon name="lucide-settings" class="size-4" /> Settings
    </span>
  </.dropdown_item>
  <.dropdown_separator />
  <.dropdown_item variant="destructive">
    <span class="flex items-center gap-2">
      <.icon name="lucide-log-out" class="size-4" /> Log out
    </span>
  </.dropdown_item>
</.dropdown_menu>
  

With Shortcuts

Display keyboard shortcuts alongside menu items using the shortcut prop.

With Shortcuts

    <.dropdown_menu id="file-menu">
  <:trigger>File</:trigger>
  <.dropdown_item shortcut="⌘N">New File</.dropdown_item>
  <.dropdown_item shortcut="⌘O">Open</.dropdown_item>
  <.dropdown_item shortcut="⌘S">Save</.dropdown_item>
  <.dropdown_separator />
  <.dropdown_item shortcut="⌘Q" variant="destructive">Quit</.dropdown_item>
</.dropdown_menu>
  

Icons with Shortcuts

Combine icons and keyboard shortcuts for a complete menu experience.

Icons and Shortcuts

    <.dropdown_menu id="edit-menu">
  <:trigger>Edit</:trigger>
  <.dropdown_item shortcut="⌘Z">
    <span class="flex items-center gap-2">
      <.icon name="lucide-undo" class="size-4" /> Undo
    </span>
  </.dropdown_item>
  <.dropdown_item shortcut="⌘C">
    <span class="flex items-center gap-2">
      <.icon name="lucide-copy" class="size-4" /> Copy
    </span>
  </.dropdown_item>
  <.dropdown_item shortcut="⌘V">
    <span class="flex items-center gap-2">
      <.icon name="lucide-clipboard" class="size-4" /> Paste
    </span>
  </.dropdown_item>
</.dropdown_menu>
  

With Labels and Groups

Organize items with labels and separators.

With Labels

    <.dropdown_menu id="account-menu">
  <:trigger>My Account</:trigger>
  <.dropdown_label>My Account</.dropdown_label>
  <.dropdown_item>Profile</.dropdown_item>
  <.dropdown_item>Billing</.dropdown_item>
  <.dropdown_separator />
  <.dropdown_label>Team</.dropdown_label>
  <.dropdown_item>Invite Members</.dropdown_item>
  <.dropdown_item>Settings</.dropdown_item>
</.dropdown_menu>
  

Usage Notes

Full keyboard navigation: Arrow Up/Down to navigate, Enter/Space to activate, Escape to close.
Auto-closes when clicking outside or selecting an item.
Use side and align props to control positioning.