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

A flexible dropdown menu component with smooth transitions.

Features

  • Flexible trigger content (button, text, avatar, etc.)
  • Menu items with optional icons and variants
  • Smooth transitions using Phoenix.LiveView.JS
  • Dark mode support
  • Configurable dropdown alignment (left, right)
  • Multiple size variants
  • Click outside or escape key to close
  • Support for right-aligned content in menu items

Basic Usage

The dropdown menu can be used with a built-in trigger (icon + label) or with a custom trigger:

# With icon and label (disclosure indicator is shown by default)
<.dropdown_menu id="user-menu" icon="hero-user" label="User Menu">
  <.menu_item>Profile</.menu_item>
  <.menu_item>Settings</.menu_item>
</.dropdown_menu>

# Without disclosure indicator
<.dropdown_menu id="menu" icon="hero-cog-6-tooth" label="Settings" disclosure={false}>
  <.menu_item>General</.menu_item>
  <.menu_item>Advanced</.menu_item>
</.dropdown_menu>

# Or with a custom trigger
<.dropdown_menu id="custom-trigger">
  <:trigger>
    <button type="button" class="text-sm">Custom Trigger</button>
  </:trigger>
  <.menu_item>Profile</.menu_item>
</.dropdown_menu>

Menu Items

Menu items support several features:

Icons and Variants

<.dropdown_menu id="menu-with-variants">
  <.menu_item icon="hero-user">
    Profile
  </.menu_item>
  <.menu_item icon="hero-cog-6-tooth" variant={:warning}>
    Settings
  </.menu_item>
  <.menu_item icon="hero-arrow-right-on-rectangle" variant={:danger}>
    Sign out
  </.menu_item>
</.dropdown_menu>

Right-aligned Content

Perfect for displaying keyboard shortcuts or additional information:

<.dropdown_menu id="menu-with-shortcuts">
  <.menu_item icon="hero-magnifying-glass">
    Search
    <:right_content>
      <kbd class="text-xs">⌘K</kbd>
    </:right_content>
  </.menu_item>
  <.menu_item icon="hero-trash" variant={:danger}>
    Delete
    <:right_content>
      <kbd class="text-xs">⌘⌫</kbd>
    </:right_content>
  </.menu_item>
</.dropdown_menu>

Disabled Items

<.dropdown_menu id="menu-with-disabled">
  <.menu_item>Enabled Item</.menu_item>
  <.menu_item disabled={true}>Disabled Item</.menu_item>
</.dropdown_menu>

Using Separators

Use the separator component to group related items:

<.dropdown_menu id="menu-with-separator">
  <.menu_item icon="hero-user">Profile</.menu_item>
  <.menu_item icon="hero-cog-6-tooth">Settings</.menu_item>
  <.separator />
  <.menu_item icon="hero-arrow-right-on-rectangle" variant={:danger}>
    Sign out
  </.menu_item>
</.dropdown_menu>

Customization

Size Variants

Both the trigger and menu items can be sized independently:

<.dropdown_menu id="large-menu" size={:lg} menu_size={:lg}>
  <.menu_item size={:lg}>Large Item</.menu_item>
</.dropdown_menu>

Available sizes:

  • :sm - Compact size
  • :md - Default size
  • :lg - Large size

Menu Alignment

Control which side the menu appears on:

<.dropdown_menu id="right-menu" align={:right}>
  <.menu_item>Right-aligned Menu</.menu_item>
</.dropdown_menu>

Accessibility

The dropdown menu implements several accessibility features:

  • Keyboard navigation (Tab, Enter, Space, Escape)
  • ARIA roles and attributes
  • Focus management
  • Screen reader support

Summary

Functions

Renders a dropdown menu component.

Hides the dropdown menu.

Renders a menu item within a dropdown menu.

Shows the dropdown menu.

Toggles the visibility of the dropdown menu.

Functions

hide_menu(id)

Hides the dropdown menu.

show_menu(id)

Shows the dropdown menu.

toggle_menu(id)

Toggles the visibility of the dropdown menu.