Dropdown menu with animated transitions, keyboard support, and click-away closing.
Example
<.dropdown label="Opções">
<.dropdown_menu_item link_type="button" phx-click="edit">Editar</.dropdown_menu_item>
<.dropdown_menu_item link_type="live_patch" to={~p"/users"}>Utilizadores</.dropdown_menu_item>
<.dropdown_menu_item disabled label="Desativado" />
</.dropdown>
Summary
Functions
A single dropdown menu item — renders as <a>, <button>, live_patch, or live_redirect.
A selectable dropdown item — acts like a radio option inside the menu.
Functions
Attributes
id(:string) - Explicit ID; auto-generated when nil. Defaults tonil.label(:string) - Trigger button text label. Defaults tonil.placement(:string) - Defaults to"left".class(:any) - Defaults tonil.trigger_class(:string) - Defaults tonil.menu_class(:string) - Classes applied to the floating menu panel. Defaults to"bg-white border border-gray-200 shadow-lg rounded-xl min-w-[12rem]".trigger_text_class(:string) - Classes for the trigger button text/bg. Defaults to"text-gray-700 hover:bg-gray-100".- Global attributes are accepted.
Slots
trigger_elementinner_block
A selectable dropdown item — acts like a radio option inside the menu.
Attributes
active(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.active_indicator_class(:string) - Colour of the dot/check when the item is selected. Defaults to"text-indigo-600".inactive_indicator_class(:string) - Colour of the dot/check when the item is unselected. Defaults to"text-gray-300".item_class(:string) - Background and text colour on hover. Defaults to"hover:bg-indigo-50 text-gray-700".- Global attributes are accepted. Supports all globals plus:
["phx-click", "phx-value", "phx-value-filter", "type"].
Slots
inner_block