PUI.Dropdown (pui v1.0.0-beta.8)

Dropdown menu component for displaying actions and options.

Basic Menu Button

<.menu_button>
  Open Menu
  <:item>Profile</:item>
  <:item>Settings</:item>
  <:item variant="destructive">Delete</:item>
</.menu_button>

With Shortcuts

<.menu_button content_class="w-52">
  <.icon name="hero-user" class="size-4" /> Account
  <:item shortcut="⌘P">Profile</:item>
  <:item shortcut="⌘S">Settings</:item>
  <:item shortcut="⇧⌘Q">Log out</:item>
</.menu_button>

With Links

<.menu_button>
  Actions
  <:item navigate="/profile">View Profile</:item>
  <:item patch="/settings">Edit Settings</:item>
  <:item href="/logout">Sign Out</:item>
</.menu_button>

Custom Items

For more control, use the :items slot with menu_item:

<.menu_button content_class="w-56">
  Options
  <:items>
    <.menu_item navigate="/dashboard">
      <.icon name="hero-home" class="size-4" /> Dashboard
    </.menu_item>
    <.menu_separator />
    <.menu_item variant="destructive" phx-click="delete">
      <.icon name="hero-trash" class="size-4" /> Delete
    </.menu_item>
  </:items>
</.menu_button>

Destructive Actions

<.menu_button>
  Danger Zone
  <:item variant="destructive" shortcut="⌘⌫">
    <.icon name="hero-trash" class="size-4" /> Delete Account
  </:item>
</.menu_button>

Attributes (menu_button/1)

Attribute	Type	Default	Description
`variant`	`string`	`"secondary"`	Button variant style
`placement`	`string`	`"bottom-start"`	Popup placement for Floating UI
`wrapper_class`	`string`	`"w-fit"`	Classes for the outer wrapper
`content_class`	`string`	`""`	CSS classes for dropdown content
`class`	`string`	`""`	Additional CSS classes for button

Slots (menu_button/1)

Slot	Description
`inner_block`	Button content (required)
`item`	Menu items with optional attributes
`items`	Custom menu content using `menu_item`

Item Attributes

Attribute	Type	Description
`variant`	`string`	Item style: "default" or "destructive"
`shortcut`	`string`	Keyboard shortcut display
`href`	`string`	Link URL
`navigate`	`string`	Phoenix navigate path
`patch`	`string`	Phoenix patch path

Unstyled Mode

When variant="unstyled", PUI still toggles aria-hidden on the popup. Your content_class should include both the hidden and visible selectors, for example:

<.menu_button
  variant="unstyled"
  content_class="aria-hidden:hidden not-aria-hidden:block min-w-48"
>
  ...
</.menu_button>

Summary

Functions

menu_button(assigns)

menu_content(assigns)

menu_item(assigns)

menu_separator(assigns)

menu_shortcut(assigns)

Functions

menu_button(assigns)

Attributes

variant (:string) - see Button variant. Use 'unstyled' for headless mode. Defaults to "secondary". Must be one of "default", "secondary", "outline", "ghost", "destructive", or "unstyled".
placement (:string) - Defaults to "bottom-start".
wrapper_class (:string) - Defaults to "w-fit".
content_class (:string) - Defaults to "".
class (:string) - Defaults to "".
trigger (:string) - Defaults to "click".
Global attributes are accepted.

Slots

item - Accepts attributes:
- variant (:string)
- shortcut (:string)
- href (:string)
- navigate (:string)
- patch (:string)
- class (:string)
- phx-click (:string)
- phx-value-action (:string)
items
inner_block

menu_content(assigns)

Attributes

class (:string) - Defaults to "".
is_unstyled (:boolean) - Defaults to false.
Global attributes are accepted.

Slots

inner_block

menu_item(assigns)

Attributes

shortcut (:string) - Defaults to nil.
variant (:string) - Defaults to "default". Must be one of "default", or "destructive".
is_unstyled (:boolean) - Defaults to false.
class (:string) - Defaults to "".
Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "name", "value", "disabled", "phx-click", "phx-value-action"].