Dropdown
Compact action menus with nested items, keyboard navigation, and custom triggers.
Basic
<.dropdown label="Edit">
<.dropdown_button>
<.icon name="hero-user-circle" class="icon" /> Profile
</.dropdown_button>
<.dropdown_button>
<.icon name="hero-users" class="icon" /> Community
</.dropdown_button>
<.dropdown_button>
<.icon name="hero-credit-card" class="icon" /> Subscription
</.dropdown_button>
<.dropdown_button>
<.icon name="hero-cog-6-tooth" class="icon" /> Settings
</.dropdown_button>
<.dropdown_separator />
<.dropdown_button>
<.icon name="hero-question-mark-circle" class="icon" /> Help Center
</.dropdown_button>
<.dropdown_button class="text-red-700 data-highlighted:bg-red-50">
<.icon name="hero-arrow-right-on-rectangle" class="icon" /> Sign Out
</.dropdown_button>
</.dropdown>Custom Toggle
<.dropdown>
<:toggle>
<button class="flex items-center gap-x-2 hover:bg-accent in-aria-expanded:bg-accent rounded-lg p-2">
<img src={~p"/images/human-avatar-01.png"} alt="User" class="size-6 rounded-lg" />
<div class="text-sm text-gray-800 font-semibold dark:text-gray-200">John Doe</div>
<.icon name="hero-chevron-down" class="size-4 in-aria-expanded:rotate-180 transition-transform" />
</button>
</:toggle>
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>Menu Items
<!-- Links -->
<.dropdown label="Links">
<.dropdown_link navigate="/components/dropdown">Dashboard</.dropdown_link>
<.dropdown_link patch="/components/dropdown">Team</.dropdown_link>
<.dropdown_link href="https://fluxonui.com" target="_blank">External Link</.dropdown_link>
</.dropdown>
<!-- Buttons -->
<.dropdown label="Buttons">
<.dropdown_button phx-click="save">Save</.dropdown_button>
<.dropdown_button phx-click="export">Export</.dropdown_button>
<.dropdown_button phx-click="duplicate">Duplicate</.dropdown_button>
<.dropdown_button phx-click="delete">Delete</.dropdown_button>
</.dropdown>Rich Content
EJ
Emma Johnson
emma@acme.com
<.dropdown class="w-64">
<.dropdown_custom class="flex items-center p-2">
<div class="w-9 h-9 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
EJ
</div>
<div class="flex flex-col ml-3">
<span class="text-sm font-medium">Emma Johnson</span>
<span class="text-xs text-zinc-500">emma@acme.com</span>
</div>
</.dropdown_custom>
<.dropdown_separator />
<.dropdown_link navigate="/profile">
<.icon name="hero-user-circle" class="icon" /> Your profile
</.dropdown_link>
<.dropdown_link navigate="/appearance">
<.icon name="hero-sun" class="icon" /> Appearance
</.dropdown_link>
<.dropdown_link navigate="/settings">
<.icon name="hero-cog-6-tooth" class="icon text-zinc-500" /> Settings
</.dropdown_link>
<.dropdown_link navigate="/notifications">
<.icon name="hero-bell" class="icon text-zinc-500" /> Notifications
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link navigate="/upgrade">
<.icon name="hero-star-solid" class="icon text-orange-600!" /> Upgrade
<.badge color="warning" class="ml-auto font-medium">20% off</.badge>
</.dropdown_link>
<.dropdown_link navigate="/referrals">
<.icon name="hero-gift" class="icon text-zinc-500" /> Referrals
</.dropdown_link>
<.dropdown_link navigate="/download">
<.icon name="hero-arrow-down-circle" class="icon text-zinc-500" /> Download app
</.dropdown_link>
<.dropdown_link navigate="/whats-new">
<.icon name="hero-sparkles" class="icon text-zinc-500" /> What's new?
</.dropdown_link>
<.dropdown_link navigate="/help">
<.icon name="hero-question-mark-circle" class="icon text-zinc-500" /> Get help?
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link
navigate="/signout"
class="text-red-600 data-highlighted:text-red-700 data-highlighted:bg-red-50 dark:text-red-400"
>
<.icon name="hero-arrow-right-on-rectangle" class="icon text-red-500" /> Sign out
</.dropdown_link>
</.dropdown>States
<.dropdown label="Disabled Items">
<.dropdown_button>Available Action</.dropdown_button>
<.dropdown_button disabled>Disabled Action</.dropdown_button>
<.dropdown_separator />
<.dropdown_link navigate="/components/dropdown">Settings</.dropdown_link>
<.dropdown_link navigate="/components/dropdown" data-disabled>Admin Panel</.dropdown_link>
</.dropdown>Placement Options
<.dropdown placement="top" label="Top">
<.dropdown_button>Bottom Start</.dropdown_button>
<.dropdown_button>Another Option</.dropdown_button>
</.dropdown>
<.dropdown placement="left" label="Left">
<.dropdown_button>Bottom End</.dropdown_button>
<.dropdown_button>Right Aligned</.dropdown_button>
</.dropdown>
<.dropdown placement="right" label="Right">
<.dropdown_button>Top Placement</.dropdown_button>
<.dropdown_button>Opens Above</.dropdown_button>
</.dropdown>
<.dropdown placement="bottom" label="Bottom">
<.dropdown_button>Right Side</.dropdown_button>
<.dropdown_button>Horizontal Menu</.dropdown_button>
</.dropdown>Custom Animation
<.dropdown animation_enter="opacity-100 translate-y-0" animation_leave="opacity-0 -translate-y-2">
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>Hover Interaction
<.dropdown open_on_hover hover_open_delay={0} hover_close_delay={100}>
<.dropdown_link navigate="/profile">Profile</.dropdown_link>
<.dropdown_link navigate="/settings">Settings</.dropdown_link>
<.dropdown_link navigate="/help">Help</.dropdown_link>
</.dropdown>User Menu Example
Emma Johnson
emma@acme.com
PRO
<.dropdown>
<:toggle>
<button class="cursor-pointer">
<img src={~p"/images/human-avatar-02.png"} alt="User" class="size-8 rounded-full" />
</button>
</:toggle>
<.dropdown_custom class="flex items-center">
<img src={~p"/images/human-avatar-02.png"} alt="Avatar" class="size-9 rounded-full" />
<div class="flex flex-col ml-3 mr-10">
<span class="text-sm font-medium leading-snug">Emma Johnson</span>
<span class="text-xs text-zinc-500 leading-snug">emma@acme.com</span>
</div>
<.badge color="danger" class="font-bold">PRO</.badge>
</.dropdown_custom>
<.dropdown_separator />
<.dropdown_button>
<.icon name="hero-home" class="icon" /> Home
</.dropdown_button>
<.dropdown_button>
<.icon name="hero-users" class="icon" /> Users
<.badge color="info">43</.badge>
</.dropdown_button>
<.dropdown_header>Settings</.dropdown_header>
<.dropdown_button><.icon name="hero-user-circle" class="icon" /> Profile</.dropdown_button>
<.dropdown_button><.icon name="hero-lock-closed" class="icon" /> Security</.dropdown_button>
<.dropdown_button><.icon name="hero-bell" class="icon" /> Notifications</.dropdown_button>
<.dropdown_button><.icon name="hero-credit-card" class="icon" /> Billing</.dropdown_button>
<.dropdown_button><.icon name="hero-question-mark-circle" class="icon" /> Help & Support</.dropdown_button>
<.dropdown_button type={:button}>
<.icon name="hero-moon" class="icon" /> Dark mode <.switch name="dark-mode" />
</.dropdown_button>
<.dropdown_header>Developer</.dropdown_header>
<.dropdown_button><.icon name="hero-code-bracket-square" class="icon" /> API Documentation</.dropdown_button>
<.dropdown_button><.icon name="hero-command-line" class="icon" /> Console</.dropdown_button>
<.dropdown_button><.icon name="hero-code-bracket" class="icon" /> Integrations</.dropdown_button>
</.dropdown>