Dropdown
Compact menus for multiple options or actions.
Menu item types
Include buttons, links, headers, separators, and custom content in dropdowns.
<.dropdown label="Dropdown" class="min-w-52">
<.dropdown_custom class="flex justify-between items-center p-2">
<div class="flex items-center gap-x-3">
<img src={~p"/images/human-avatar-01.png"} alt="" class="size-10 rounded-full" />
<div class="flex flex-col">
<span class="text-base font-medium">John Smith</span>
<span class="text-sm text-zinc-500">john@acme.com</span>
</div>
</div>
<.badge color="red">Pro</.badge>
</.dropdown_custom>
<.dropdown_separator />
<.dropdown_custom class="flex items-center p-2 gap-x-10 ">
<div class="flex flex-col">
<span class="text-base font-medium">Available Tokens</span>
<span class="text-sm text-zinc-500">Only 75 tokens available</span>
</div>
<.button size="xs">
Manage
</.button>
</.dropdown_custom>
<.dropdown_separator />
<.dropdown_header>Account</.dropdown_header>
<.dropdown_link>
<.icon name="u-user-01" class="text-zinc-500 icon mr-1" /> Profile
</.dropdown_link>
<.dropdown_link>
<.icon name="u-settings-02" class="text-zinc-500 icon mr-1" /> Preferences
</.dropdown_link>
<.dropdown_link>
<.icon name="u-bell-01" class="text-zinc-500 icon mr-1" /> Notifications
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link>
<.icon name="u-log-out-01" class="text-zinc-500 icon mr-1" /> Sign out
</.dropdown_link>
</.dropdown>
Custom toggle
Create a custom toggle button to match your design and enhance interaction.
<.dropdown class="min-w-40">
<:toggle class="flex items-center gap-x-2 hover:bg-zinc-200/50 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="u-chevron-down" class="size-4" />
</:toggle>
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>
Animation
Apply custom animations to dropdown transitions for a polished experience.
<.dropdown
label="Edit"
animation_enter="opacity-100 scale-100"
animation_leave="opacity-0 scale-95"
>
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>
Placement
Position dropdowns in different directions to fit various layout needs.
<.dropdown placement="top-start">
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>
Open on hover
Enable dropdown opening on hover with customizable delays.
<.dropdown
label="Edit"
open_on_hover
hover_open_delay={0}
hover_close_delay={100}
>
<.dropdown_button>Profile</.dropdown_button>
<.dropdown_button>Billing</.dropdown_button>
<.dropdown_button>Settings</.dropdown_button>
</.dropdown>
Customization
Style dropdowns and items to integrate seamlessly with your design system.
<.dropdown label="Edit" class="min-w-36 p-0">
<.dropdown_header class="px-4">Account</.dropdown_header>
<.dropdown_button class={[
"font-medium px-4 rounded-none",
"data-[focus]:text-white data-[focus]:bg-blue-500"
]}>
Profile
</.dropdown_button>
<.dropdown_button class={[
"font-medium px-4 rounded-none",
"data-[focus]:text-white data-[focus]:bg-blue-500"
]}>
Billing
</.dropdown_button>
<.dropdown_button class={[
"font-medium px-4 rounded-none",
"data-[focus]:text-white data-[focus]:bg-blue-500"
]}>
Settings
</.dropdown_button>
</.dropdown>
Full example
Explore a comprehensive example showcasing all features and customization options.
<.dropdown>
<:toggle class="flex items-center gap-x-2 hover:bg-zinc-200/50 rounded-lg p-2">
<img src={~p"/images/human-avatar-02.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="u-chevron-down" class="size-4" />
</:toggle>
<.dropdown_custom class="flex items-center p-2">
<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="red" class="font-bold">PRO</.badge>
</.dropdown_custom>
<.dropdown_separator class="mx-2" />
<.dropdown_button>
<.icon name="u-home-04" class="icon" /> Home
</.dropdown_button>
<.dropdown_button>
<.icon name="u-users-03" class="icon" /> Users
<.badge variant="pill">43</.badge>
</.dropdown_button>
<.dropdown_header>Settings</.dropdown_header>
<.dropdown_button><.icon name="u-user-circle" class="icon" /> Profile</.dropdown_button>
<.dropdown_button><.icon name="u-lock-03" class="icon" /> Security</.dropdown_button>
<.dropdown_button><.icon name="u-bell-02" class="icon" /> Notifications</.dropdown_button>
<.dropdown_button><.icon name="u-credit-card-01" class="icon" /> Billing</.dropdown_button>
<.dropdown_button><.icon name="u-help-circle" class="icon" /> Help & Support</.dropdown_button>
<.dropdown_button type={:button}>
<.icon name="u-moon-01" class="icon" /> Dark mode <.switch />
</.dropdown_button>
<.dropdown_header>Developer</.dropdown_header>
<.dropdown_button><.icon name="u-code-square-01" class="icon" /> API Documentation</.dropdown_button>
<.dropdown_button><.icon name="u-terminal-browser" class="icon" /> Console</.dropdown_button>
<.dropdown_button><.icon name="u-git-branch-01" class="icon" /> Integrations</.dropdown_button>
</.dropdown>