<.dropdown label="Dropdown">

<.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.
• 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 - custom trigger content. Rendered INSIDE the dropdown's own <button>, so never nest interactive elements (<.button>, links) here - browsers split nested buttons and the toggle binding breaks. Style the built-in trigger via trigger_class instead, e.g. trigger_class="pc-button pc-button--primary pc-button--md".
• inner_block

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

A non-interactive heading for a group of menu items.

<.dropdown_menu_label>Signed in as matt@petal.build</.dropdown_menu_label>

Attributes

• class (:any) - any additional CSS classes. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A thin divider between groups of menu items.

Attributes

• class (:any) - any additional CSS classes. Defaults to nil.
• Global attributes are accepted.