Dropdowns

A dropdown is a compact UI element that allows a user to select from different options.

Basic dropdown

          <.dropdown label="Dropdown">
  <.dropdown_menu_item>
    <HeroiconsV1.Outline.home class="w-5 h-5 text-gray-500" />
    Button item with icon
  </.dropdown_menu_item>
  <.dropdown_menu_item link_type="button" label="button item" />
  <.dropdown_menu_item link_type="a" to="/" label="Link" />
  <.dropdown_menu_item link_type="a" to="/" label="Link with method" method={:put} />
  <.dropdown_menu_item link_type="live_patch" to="/" label="Live Patch" />
  <.dropdown_menu_item link_type="live_redirect" to="/" label="Live Redirect" />
  <.dropdown_menu_item phx-click="some_phoenix_click_event" label="Phoenix click event" />
</.dropdown>

Unlabelled dropdown

          <.dropdown>
  <.dropdown_menu_item label="Item 1" />
  <.dropdown_menu_item label="Item 2" />
</.dropdown>

Custom dropdown trigger

          <.dropdown>
  <:trigger_element>
    <div class="inline-flex items-center justify-center w-full align-middle focus:outline-none">
      <.avatar size="sm" src="img_1.png" />
      <HeroiconsV1.Solid.chevron_down class="w-4 h-4 ml-1 -mr-1 text-gray-400 dark:text-gray-100" />
    </div>
  </:trigger_element>
  <.dropdown_menu_item label="Item 1" />
  <.dropdown_menu_item label="Item 2" />
</.dropdown>

Properties

Defaults are indicated in bold.

Dropdown properties

Defaults are indicated in bold. Required fields have * before the label.

Name	Type	Options
class	:string	-
menu_items_wrapper_class	:string	-
label	:string	-
js_lib	:string	"alpine_js", "live_view_js"
placement	:string	-
src	:string	-
options_container_id	:string	-
trigger_element*	:slot	-
inner_block*	:slot	-
[all additional properties]	Unused.

Dropdown Menu Item properties

Defaults are indicated in bold. Required fields have * before the label.

Name	Type	Options
label	:string	-
class	:string	-
link_type	:string	"a", "live_patch", "live_redirect", "button"
inner_block*	:slot	-
[all additional properties]	Forwarded to the button/a element.