PineUiPhoenix.Components.DropdownMenu (Pine UI v0.2.0)

A menu revealed by a trigger.

<.dropdown_menu label="Options">
  <:item navigate={~p"/profile"}>Profile</:item>
  <:item on_click="sign-out" variant="danger">Sign out</:item>
</.dropdown_menu>

Summary

Overlays

dropdown_menu(assigns)

Renders a dropdown menu.

Overlays

dropdown_menu(assigns)

Renders a dropdown menu.

Accessibility

The trigger carries aria-haspopup="menu", aria-expanded (bound to the real state) and aria-controls. The panel is role="menu" with role="menuitem" children. Escape closes and returns focus to the trigger; clicking outside closes.

Attributes

id (:string) - Defaults to nil.
label (:string) - Text for the built-in trigger button. Defaults to nil.
position (:string) - Defaults to "bottom-start". Must be one of "bottom-start", "bottom-end", "top-start", or "top-end".
width (:string) - A Tailwind width class for the panel. Defaults to "w-56".
class (:string) - Defaults to nil.
menu_class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

trigger - Replaces the default trigger button entirely.
item - Accepts attributes:
- navigate (:string)
- patch (:string)
- href (:string)
- on_click (:any) - A phx-click event name or a Phoenix.LiveView.JS struct.
- variant (:string) - Must be one of "default", or "danger".
- disabled (:boolean)
- divider (:boolean) - Draws a separator above this item.
header - Non-interactive content pinned to the top of the menu.