Dropdown

Menu dropdowns with items, shortcuts, separators, and destructive actions.

Menu Button with Items

Basic dropdown with labeled items and icons. Use the <:item> slot for simple menu options. 

<.menu_button content_class="w-52">
<.icon name="hero-user" class="size-4" /> Account
<:item navigate="/profile">Profile</:item>
<:item>Settings</:item>
<:item>Help</:item>
</.menu_button>

Menu with Keyboard Shortcuts

Display keyboard shortcuts for quick actions. Add the shortcut attribute to items. 

<.menu_button content_class="w-56">
Actions
<:item shortcut="⌘P">Print</:item>
<:item shortcut="⌘S">Save</:item>
<:item shortcut="⇧⌘N">New File</:item>
<:item shortcut="⌘Q">Quit</:item>
</.menu_button>

Destructive Action Items

Use the destructive variant for actions that delete or remove data. These items appear with warning colors. 

<.menu_button content_class="w-56" variant="outline">
Delete Options
<:item variant="destructive" shortcut="⌘⌫">
Delete File
</:item>
<:item variant="destructive">
Remove Folder
</:item>
</.menu_button>

Menu Separators

Group related items with separators using the <:items> slot and menu_separator component. 

<.menu_button content_class="w-56">
More Options
<:items>
<.menu_item>View Details</.menu_item>
<.menu_item>Edit</.menu_item>
<.menu_separator />
<.menu_item>Share</.menu_item>
<.menu_item>Copy Link</.menu_item>
<.menu_separator />
<.menu_item variant="destructive">Delete</.menu_item>
</:items>
</.menu_button>

Custom Items with Event Handlers

Use the <:items> slot for full control over menu items. Supports phx-click handlers like the undo action below. 

<.menu_button content_class="w-56">
Actions
<:items>
<.menu_item navigate="/settings">
  Settings
</.menu_item>
<.menu_item variant="destructive">
  Delete Profile
</.menu_item>
<.menu_separator />
<.menu_item phx-click="undo">
  Undo
</.menu_item>
</:items>
</.menu_button>

Import 

use PUI

Description

A dropdown menu component that displays actions and options when triggered. Supports keyboard shortcuts, separators, destructive actions, and custom content. Built on top of Floating UI for precise positioning and smooth animations.

Props

Name Type Default Description
variant string "secondary" Button variant style (default, secondary, destructive, outline, ghost, link)
class string "" Additional CSS classes for the button
content_class string "" CSS classes for the dropdown content container

Examples

With Navigation

Usage Guidelines

Simple Items vs Custom Items

Use the <:item> slot for quick menu items with automatic rendering. Use <:items> when you need separators or more complex layouts with <.menu_item>.

Navigation Options

Menu items support navigate (LiveView navigation), patch (LiveView patch), and href (standard links).

Destructive Actions

Always use variant="destructive" for actions that delete, remove, or have significant consequences. This provides visual warning cues to users.

Accessibility

Dropdowns include proper ARIA attributes (role="menuitem", aria-haspopup, aria-expanded) and support keyboard navigation for accessible interaction.