# `PetalComponents.Dropdown`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/dropdown.ex#L1)

# `dropdown`

  <.dropdown label="Dropdown" js_lib="alpine_js|live_view_js">
    <.dropdown_menu_item link_type="button">
      <.icon name="hero-home" class="w-5 h-5 text-gray-500" />
      Button item with icon
    </.dropdown_menu_item>
    <.dropdown_menu_item link_type="a" to="/" label="a item" />
    <.dropdown_menu_item link_type="a" to="/" disabled label="disabled item" />
    <.dropdown_menu_item link_type="live_patch" to="/" label="Live Patch item" />
    <.dropdown_menu_item link_type="live_redirect" to="/" label="Live Redirect item" />
  </.dropdown>

## Attributes

* `options_container_id` (`:string`)
* `label` (`:string`) - labels your dropdown option. Defaults to `nil`.
* `class` (`:any`) - any extra CSS class for the parent container. Defaults to `nil`.
* `trigger_class` (`:string`) - additional classes for the trigger button. Defaults to `nil`.
* `menu_items_wrapper_class` (`:any`) - any extra CSS class for menu item wrapper container. Defaults to `nil`.
* `js_lib` (`:string`) - javascript library used for toggling. Defaults to `"alpine_js"`. Must be one of `"alpine_js"`, or `"live_view_js"`.
* `on_close` (`Phoenix.LiveView.JS`) - additional JS commands to run when the dropdown closes (LiveView.JS only). Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* `placement` (`:string`) - Defaults to `"left"`. Must be one of `"left"`, or `"right"`.
* Global attributes are accepted.
## Slots

* `trigger_element`
* `inner_block`

# `dropdown_menu_item`

## Attributes

* `to` (`:string`) - link path. Defaults to `nil`.
* `label` (`:string`) - link label.
* `class` (`:any`) - any additional CSS classes. Defaults to `nil`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `link_type` (`:string`) - Defaults to `"button"`. Must be one of `"a"`, `"live_patch"`, `"live_redirect"`, or `"button"`.
* Global attributes are accepted. Supports all globals plus: `["method", "download", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"]`.
## Slots

* `inner_block`

---

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