View Source Lume.Components.DropdownMenu (lume v0.3.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.