Components
Dropdowns
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
# <.dropdown>
attr(:options_container_id, :string)
attr(:label, :string, default: nil, doc: "labels your dropdown option")
attr(:class, :string, default: "", doc: "any extra CSS class for the parent container")
attr(:menu_items_wrapper_class, :string,
default: "",
doc: "any extra CSS class for menu item wrapper container"
)
attr(:js_lib, :string,
default: "alpine_js",
values: ["alpine_js", "live_view_js"],
doc: "javascript library used for toggling"
)
attr(:placement, :string, default: "left", values: ["left", "right"])
attr(:rest, :global)
slot(:trigger_element)
slot(:inner_block, required: false)
# <.dropdown_menu_item>
attr(:to, :string, default: nil, doc: "link path")
attr(:label, :string, doc: "link label")
attr(:class, :string, default: "", doc: "any additional CSS classes")
attr(:link_type, :string,
default: "button",
values: ["a", "live_patch", "live_redirect", "button"]
)
attr(:rest, :global, include: ~w(method download hreflang ping referrerpolicy rel target type))
slot(:inner_block, required: false)