Dropdown

Compact menus for multiple options or actions.

<.dropdown label="Edit">
  <.dropdown_button>
    <.icon name="hero-user-circle" class="icon" /> Profile
  </.dropdown_button>
  <.dropdown_button>
    <.icon name="hero-credit-card" class="icon" /> Billing
  </.dropdown_button>
  <.dropdown_button>
    <.icon name="hero-cog-6-tooth" class="icon" /> Settings
  </.dropdown_button>
</.dropdown>

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="hero-user" class="text-zinc-500 icon mr-1" /> Profile
  </.dropdown_link>

  <.dropdown_link>
    <.icon name="hero-cog-6-tooth" class="text-zinc-500 icon mr-1" /> Preferences
  </.dropdown_link>

  <.dropdown_link>
    <.icon name="hero-bell" class="text-zinc-500 icon mr-1" /> Notifications
  </.dropdown_link>

  <.dropdown_separator  />

  <.dropdown_link>
    <.icon name="hero-arrow-right-on-rectangle" 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="hero-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.

Emma Johnson

<.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="hero-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="hero-home" class="icon" /> Home
  </.dropdown_button>

  <.dropdown_button>
    <.icon name="hero-users" class="icon" /> Users
    <.badge variant="pill">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 />
  </.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>