Noora.Dropdown
(noora v0.68.0)
Copy Markdown
Renders a customizable dropdown component with a trigger, menu, and item options, supporting icons, labels, and event handling.
Example
<.dropdown id="menu" label="Options">
<.dropdown_item label="Edit" navigate="/edit" />
<.dropdown_item label="Delete" on_click="delete" />
</.dropdown>Summary
Functions
Attributes
id(:string) (required) - Unique identifier for the dropdown component.label(:string) - Main text displayed in the dropdown trigger. Defaults tonil.secondary_text(:string) - Secondary text displayed to the left of the main label. Defaults tonil.icon_only(:boolean) - Whether the dropdown trigger is icon-only. Defaults tofalse.hint(:string) - Hint text for the dropdown. Defaults tonil.disabled(:boolean) - Whether the dropdown is disabled. Defaults tonil.on_open_change(:string) - Event handler for when the dropdown opens. Defaults tonil.on_highlight_change(:string) - Event handler for when the highlighted option changes. Defaults tonil.on_select(:string) - Event handler for when an option is selected. Defaults tonil.on_escape_key_down(:string) - Event handler for when the escape key is pressed. Defaults tonil.on_pointer_down_outside(:string) - Event handler for when the pointer is pressed outside the dropdown. Defaults tonil.on_focus_outside(:string) - Function called when the focus is moved outside the component. Defaults tonil.on_interact_outside(:string) - Function called when an interaction happens outside the component. Defaults tonil.close_on_select(:boolean) - Whether to close the dropdown when an item is selected. Defaults totrue.- Global attributes are accepted. Additional HTML attributes.
Slots
icon- Icon to be rendered in the dropdown trigger.search- Search input to be rendered at the top of the dropdown menu (outside scroll area).inner_block- Content to be rendered inside the dropdown menu.
Attributes
value(:string) - Value associated with the dropdown item.on_click(:string) - Event handler for when the dropdown item is clicked. Defaults tonil.patch(:string) - Phoenix LiveView patch navigation path. Defaults tonil.navigate(:string) - Phoenix LiveView navigation path. Defaults tonil.href(:string) - Standard URL for navigation. Defaults tonil.size(:string) - Size of the dropdown item. Defaults to"small". Must be one of"small", or"large".label(:string) - Text displayed as the main content of the item. Defaults tonil.secondary_text(:string) - Secondary text displayed in parentheses after the label. Defaults tonil.description(:string) - Additional description text (only visible when size is 'large'). Defaults tonil.checked(:boolean) - When set to true or false, renders a checkbox in the checked or unchecked state. When nil (default), no checkbox is rendered. Defaults tonil.- Global attributes are accepted. Additional HTML attributes.
Slots
right_icon- Optional slot for rendering an icon on the right side of the item.left_icon- Optional slot for rendering an icon on the left side of the item.
Attributes
id(:string) (required) - Unique identifier for the dropdown component.label(:string) - Main text displayed in the dropdown trigger. Defaults tonil.disabled(:boolean) - Whether the dropdown is disabled. Defaults tonil.on_open_change(:string) - Event handler for when the dropdown opens. Defaults tonil.on_highlight_change(:string) - Event handler for when the highlighted option changes. Defaults tonil.on_select(:string) - Event handler for when an option is selected. Defaults tonil.on_escape_key_down(:string) - Event handler for when the escape key is pressed. Defaults tonil.on_pointer_down_outside(:string) - Event handler for when the pointer is pressed outside the dropdown. Defaults tonil.on_focus_outside(:string) - Function called when the focus is moved outside the component. Defaults tonil.on_interact_outside(:string) - Function called when an interaction happens outside the component. Defaults tonil.- Global attributes are accepted. Additional HTML attributes.
Slots
icon- Icon to be rendered in the dropdown trigger.inner_block- Content to be rendered inside the dropdown menu.