# `LineaUI.Components.Dropdown`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/dropdown.ex#L1)

LineOne's dropdown menu: a white box under its button with links and actions, groups split by
separators, icons, a header, a search field, people.

    <.dropdown id="actions" label="Dropdown">
      <.dropdown_item href="#">Action</.dropdown_item>
      <.dropdown_item phx-click="archive">Archive</.dropdown_item>
      <.dropdown_separator />
      <.dropdown_item color="error" phx-click="delete">
        <:icon><svg>…</svg></:icon>
        Delete item
      </.dropdown_item>
    </.dropdown>

`toggle_icon` draws LineOne's flat round icon button with the three dots (the menu of a card):

    <.dropdown id="card-menu" toggle_icon="dots" placement="bottom-end">
      <.dropdown_item href="#">Action</.dropdown_item>
    </.dropdown>

`label` draws LineOne's button with its turning chevron (`color` and `shape` style it); any
other trigger goes in the `:toggle` slot:

    <.dropdown id="more">
      <:toggle><.button icon variant="flat" shape="pill" aria-label="More">⋮</.button></:toggle>
      …
    </.dropdown>

The keyboard works as in a menu (↑ ↓ Home End, letters, Esc, Tab). It opens and closes from
the browser (`LineaUI.toggle("actions")`), from the server (`LineaUI.close(socket, "actions")`)
or from `open`; `on_open` / `on_close` run whoever opened or closed it.

# `dropdown`

Renders a dropdown menu.

Events: `on_open` and `on_close` push `%{"id" => id}` when they are event names.

## Attributes

* `id` (`:string`) (required)
* `label` (`:string`) - Draws LineOne's dropdown button with this text. Defaults to `nil`.
* `color` (`:string`) - The color of the `label` button. Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `toggle_icon` (`:string`) - Draws LineOne's flat icon-button trigger with three dots, horizontal (`dots`) or vertical (`dots-vertical`). It inherits the parent's text color and is `size-8` and round; `label` and the `:toggle` slot win over it. Defaults to `nil`. Must be one of `nil`, `"dots"`, or `"dots-vertical"`.
* `toggle_class` (`:any`) - Merged into the `toggle_icon` button (`-mr-2 size-7`...). Defaults to `nil`.
* `toggle_label` (`:string`) - The accessible name of the `toggle_icon` button. Defaults to `"Menu"`.
* `shape` (`:string`) - The shape of the trigger button. `nil` is `rounded` for the `label` button and `pill` for the `toggle_icon` one. Defaults to `nil`. Must be one of `nil`, `"rounded"`, `"pill"`, or `"square"`.
* `open` (`:boolean`) - Defaults to `false`.
* `placement` (`:string`) - Defaults to `"bottom-start"`. Must be one of `"bottom-start"`, `"bottom"`, `"bottom-end"`, `"top-start"`, `"top"`, `"top-end"`, `"left-start"`, `"left"`, `"left-end"`, `"right-start"`, `"right"`, or `"right-end"`.
* `offset` (`:integer`) - Pixels between the trigger and the menu. Defaults to `4`.
* `close_on_select` (`:boolean`) - Defaults to `true`.
* `on_open` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `on_close` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_open` / `on_close` events. Defaults to `nil`.
* `class` (`:any`) - Merged into the menu box (`w-72`, `h-36 overflow-y-auto`...). Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `toggle` - A trigger of your own instead of the `label` button.
* `inner_block` (required)

# `dropdown_header`

A title over the items, as in LineOne's "HTML Content" dropdown.
## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `dropdown_item`

An item of the menu: a link with `href`, `navigate` or `patch`, a button otherwise
(`phx-click`, `type="submit"`...).

## Attributes

* `color` (`:string`) - Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, or `"error"`.
* `variant` (`:string`) - `media` is the taller row LineOne uses for people (an avatar and two lines). Defaults to `"default"`. Must be one of `"default"`, or `"media"`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `type` (`:string`) - Defaults to `"button"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download", "form", "name", "value"]`.
## Slots

* `icon` - Drawn before the text, as in LineOne's "Dropdown Icons".
* `inner_block` (required)

# `dropdown_search`

The search field across the menu, with LineOne's magnifier. Typing in it is not taken by the
menu's keys; `phx-change`, `phx-debounce` and `name` pass through.

## Attributes

* `placeholder` (`:string`) - Defaults to `nil`.
* `name` (`:string`) - Defaults to `nil`.
* `value` (`:string`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["phx-debounce", "phx-throttle", "autocomplete", "form"]`.

# `dropdown_separator`

The line between two groups of items.
## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.

---

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