Noora (0.81.4)

Button Dropdown

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the dropdown component
Required label * :string

The label of the button
size :string

Determines the overall size of the elements, including padding, font size, and other items
"large"
disabled :boolean

Whether the button dropdown is disabled
false
on_open_change :string

Event handler for when the dropdown opens
on_highlight_change :string

Event handler for when the highlighted option changes
on_select :string

Event handler for when an option is selected
on_escape_key_down :string

Event handler for when the escape key is pressed
on_pointer_down_outside :string

Event handler for when the pointer is pressed outside the dropdown
on_focus_outside :string

Function called when the focus is moved outside the component
on_interact_outside :string

Function called when an interaction happens outside the component
close_on_select :boolean

Whether to close the dropdown when an item is selected
true
align :string

Alignment of the dropdown menu relative to the button
"start"
rest :global

Additional HTML attributes for the main button
icon_left :slot

Icon displayed on the left of the label
icon_right :slot

Icon displayed on the right of the label
inner_block :slot

Content to be rendered inside the dropdown menu

 
<.dropdown_item value="1" label="Option 1" />
<.dropdown_item value="2" label="Option 2" />
<.dropdown_item value="3" label="Option 3" />