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>
<Heroicons.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" />
<Heroicons.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
Name | Type | Options |
---|---|---|
label | :string | - |
js_lib | :string |
`live_view_js`,
alpine_js
|
placement | :string | left , `right` |
src | :string | - |
options_container_id | :string | - |
trigger_element | :slot | - |
.dropdown_menu_item
Name | Type | Options |
---|---|---|
label* | :string | - |
link_type | :string |
button
, `a`, `live_patch`, `live_redirect`
|
inner_block | :slot | - |
class | :string | - |
[all additional properties] |
Will be forwarded to the
button/a
HTML element.
|