View Source Lume.Components.DropdownMenu (lume v0.1.0)

A flexible dropdown menu component with smooth transitions.

Features

  • Flexible trigger content through slots (button, text, avatar, etc.)
  • Menu items with optional icons and variants
  • Smooth transitions using Phoenix.LiveView.JS
  • Dark mode support
  • Configurable alignment (left, right)
  • Multiple size variants
  • Keyboard navigation (up/down arrows, home/end)
  • Click outside to close

Examples

# Basic dropdown with regular navigation
<.dropdown_menu id="user-menu">
  <:trigger>
    <button type="button" class="text-sm">Options</button>
  </:trigger>
  <:item>
    <.link navigate={~p"/profile"} class="w-full">
      <.icon name="hero-user" />
      Profile
    </.link>
  </:item>
  <:item>
    <.link patch={~p"/settings"} class="w-full">
      <.icon name="hero-cog-6-tooth" />
      Settings
    </.link>
  </:item>
  <:item variant={:error}>
    <button type="button" class="w-full" phx-click="logout">
      <.icon name="hero-arrow-right-on-rectangle" />
      Sign out
    </button>
  </:item>
</.dropdown_menu>

# With avatar trigger and right alignment
<.dropdown_menu id="profile-menu" align={:right} size={:sm}>
  <:trigger>
    <.avatar
      alt="John Doe"
      fallback="JD"
      image_url="/images/avatar.jpg"
    />
  </:trigger>
  <:item>
    <.link navigate={~p"/profile"} class="w-full">Your Profile</.link>
  </:item>
  <:item>
    <button type="button" class="w-full" phx-click="show_settings">Settings</button>
  </:item>
  <:item variant={:error}>
    <button type="button" class="w-full" phx-click="logout">Sign out</button>
  </:item>
</.dropdown_menu>

Summary

Functions

Renders a dropdown menu component.

Hides the dropdown menu.

Toggles the visibility of the dropdown menu.

Functions

hide_menu(id)

Hides the dropdown menu.

toggle_menu(id)

Toggles the visibility of the dropdown menu.