SutraUI.DropdownMenu (Sutra UI v0.2.0)

A dropdown menu component that displays a list of actions or options.

The dropdown menu provides a trigger button that opens a popover menu with full keyboard navigation support:

Click to open/close the menu
Arrow keys (Up/Down) for navigation
Home/End keys to jump to first/last item
Enter/Space to activate items
Escape to close the menu
Mouse hover to highlight items
Automatic closure when clicking outside

Requirements

A unique id attribute is required for the JavaScript hook
The component uses CSS anchor positioning for popover placement

Examples

# Basic dropdown menu
<.dropdown_menu id="user-menu">
  <:trigger>Options</:trigger>
  <.dropdown_item><a href="/profile">Profile</a></.dropdown_item>
  <.dropdown_item><.link navigate={~p"/settings"}>Settings</.link></.dropdown_item>
  <.dropdown_separator />
  <.dropdown_item variant="destructive">
    <.link href={~p"/logout"} method="delete">Logout</.link>
  </.dropdown_item>
</.dropdown_menu>

# With icons and shortcuts
<.dropdown_menu id="file-menu">
  <:trigger>File</:trigger>
  <.dropdown_item shortcut="Ctrl+N">
    <a href="/new">New</a>
  </.dropdown_item>
  <.dropdown_item shortcut="Ctrl+O">
    <a href="/open">Open</a>
  </.dropdown_item>
</.dropdown_menu>

# With groups and labels
<.dropdown_menu id="settings-menu">
  <:trigger>Settings</:trigger>
  <.dropdown_label>Account</.dropdown_label>
  <.dropdown_item><a href="/profile">Profile</a></.dropdown_item>
  <.dropdown_item><a href="/billing">Billing</a></.dropdown_item>
  <.dropdown_separator />
  <.dropdown_label>Danger Zone</.dropdown_label>
  <.dropdown_item variant="destructive">
    <button phx-click="delete_account">Delete Account</button>
  </.dropdown_item>
</.dropdown_menu>

# With disabled items
<.dropdown_menu id="edit-menu">
  <:trigger>Edit</:trigger>
  <.dropdown_item><button phx-click="cut">Cut</button></.dropdown_item>
  <.dropdown_item><button phx-click="copy">Copy</button></.dropdown_item>
  <.dropdown_item disabled><button>Paste</button></.dropdown_item>
</.dropdown_menu>

# Custom positioning
<.dropdown_menu id="actions-menu" side="top" align="end">
  <:trigger>Actions</:trigger>
  <.dropdown_item><button phx-click="action1">Action 1</button></.dropdown_item>
  <.dropdown_item><button phx-click="action2">Action 2</button></.dropdown_item>
</.dropdown_menu>

Accessibility

The trigger button has aria-haspopup="menu" and aria-expanded attributes
The menu has role="menu" and is referenced by aria-controls
Menu items have role="menuitem"
The active item is tracked via aria-activedescendant
Disabled items have aria-disabled="true"
Keyboard navigation follows WAI-ARIA menu pattern

Summary

Functions

dropdown_item(assigns)

Renders a menu item wrapper.

dropdown_label(assigns)

Renders a non-interactive label for a group of items.

dropdown_menu(assigns)

Renders a dropdown menu component.

dropdown_separator(assigns)

Renders a separator between menu items.

Functions

dropdown_item(assigns)

Renders a menu item wrapper.

The inner content can be any element - <a>, <button>, <.link>, etc.

Attributes

variant - Visual variant. Values: default, destructive. Default: default
disabled - Whether the item is disabled. Default: false
shortcut - Keyboard shortcut to display (e.g., "Ctrl+N")
class - Additional CSS classes

Examples

<.dropdown_item><a href="/profile">Profile</a></.dropdown_item>
<.dropdown_item shortcut="Ctrl+S"><button phx-click="save">Save</button></.dropdown_item>
<.dropdown_item variant="destructive"><button phx-click="delete">Delete</button></.dropdown_item>
<.dropdown_item disabled><button>Unavailable</button></.dropdown_item>

Attributes

variant (:string) - Defaults to "default". Must be one of "default", or "destructive".
disabled (:boolean) - Defaults to false.
shortcut (:string) - Keyboard shortcut to display. Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dropdown_label(assigns)

Renders a non-interactive label for a group of items.

Examples

<.dropdown_label>Account</.dropdown_label>
<.dropdown_item><a href="/profile">Profile</a></.dropdown_item>
<.dropdown_item><a href="/settings">Settings</a></.dropdown_item>

Attributes

class (:string) - Defaults to nil.

Slots

inner_block (required)

dropdown_menu(assigns)

Renders a dropdown menu component.

Attributes

id - Required. Unique identifier for the dropdown (needed for JS hook)
side - Which side the dropdown opens on. Values: top, bottom, left, right. Default: bottom
align - Alignment relative to trigger. Values: start, center, end. Default: start
class - Additional CSS classes for the container
trigger_class - Additional CSS classes for the trigger button
menu_class - Additional CSS classes for the menu

Slots

trigger - Required. Content for the trigger button
inner_block - Required. Menu content (use item/1, separator/1, label/1)

Attributes

id (:string) (required) - Unique identifier (required for hook).
class (:string) - Additional CSS classes for the container. Defaults to nil.
side (:string) - Popover position relative to trigger. Defaults to "bottom". Must be one of "top", "bottom", "left", or "right".
align (:string) - Popover alignment. Defaults to "start". Must be one of "start", "end", or "center".
trigger_class (:string) - Additional CSS classes for the trigger button. Defaults to nil.
menu_class (:string) - Additional CSS classes for the menu. Defaults to nil.
Global attributes are accepted. Additional HTML attributes for the container.

Slots

trigger (required) - Content for the trigger button.
inner_block (required) - Menu items and content.

dropdown_separator(assigns)

Renders a separator between menu items.

Examples

<.dropdown_item><a href="/profile">Profile</a></.dropdown_item>
<.dropdown_separator />
<.dropdown_item><a href="/logout">Logout</a></.dropdown_item>

Attributes

class (:string) - Defaults to nil.