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.