# `PUI.Dropdown`

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>

# `menu_button`

## 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`

## Attributes

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

* `inner_block`

# `menu_item`

## 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"]`.
## Slots

* `inner_block`

# `menu_separator`

# `menu_shortcut`

## Attributes

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

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*