AvenUI.Components.Dropdown (AvenUI v1.0.0)

Copy Markdown View Source

Dropdown menu component using Phoenix LiveView's built-in JS commands.

Zero external JS dependency — uses Phoenix.LiveView.JS for show/hide, with the Dropdown hook handling keyboard navigation and outside-click.

Examples

<%!-- Basic action menu --%>
<.dropdown id="actions-menu">
  <:trigger>
    <.button variant="secondary" size="sm">
      Options
      <.dropdown_chevron />
    </.button>
  </:trigger>

  <.dropdown_item phx-click="edit">Edit</.dropdown_item>
  <.dropdown_item phx-click="duplicate">Duplicate</.dropdown_item>
  <.dropdown_separator />
  <.dropdown_item variant="danger" phx-click="delete">Delete</.dropdown_item>
</.dropdown>

<%!-- With icons and labels --%>
<.dropdown id="user-menu" align="right">
  <:trigger>
    <.avatar initials="KN" size="sm" class="cursor-pointer" />
  </:trigger>

  <.dropdown_label>Khemmanat N.</.dropdown_label>
  <.dropdown_separator />
  <.dropdown_item>
    <:icon>
      <svg class="h-4 w-4" .../>
    </:icon>
    Profile settings
  </.dropdown_item>
  <.dropdown_item phx-click="logout">Sign out</.dropdown_item>
</.dropdown>

<%!-- Grouped with labels --%>
<.dropdown id="view-menu">
  <:trigger><.button variant="ghost" size="sm">View</.button></:trigger>

  <.dropdown_label>Layout</.dropdown_label>
  <.dropdown_item><.dropdown_check checked={@view == "list"} /> List</.dropdown_item>
  <.dropdown_item><.dropdown_check checked={@view == "grid"} /> Grid</.dropdown_item>
  <.dropdown_separator />
  <.dropdown_label>Sort</.dropdown_label>
  <.dropdown_item phx-click="sort" phx-value-by="name">Name</.dropdown_item>
  <.dropdown_item phx-click="sort" phx-value-by="date">Date</.dropdown_item>
</.dropdown>

Summary

Functions

dropdown(assigns)

Renders a dropdown menu with trigger and menu items.

dropdown_check(assigns)

Checkmark indicator for toggleable menu items.

dropdown_chevron(assigns)

Chevron icon for trigger buttons — auto-rotates when open.

dropdown_item(assigns)

Individual dropdown menu item.

dropdown_label(assigns)

Section label / group header inside a dropdown.

dropdown_separator(assigns)

Visual separator line between groups.

Functions