Noora.Dropdown (noora v0.3.0)
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
.
Slots
icon
- Icon to be rendered in the dropdown trigger.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
) (required) - Text displayed as the main content of the item.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
.- 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
.
Slots
inner_block
- Content to be rendered inside the dropdown menu.