Calcite Dropdowns are floating lists that can be revealed by an event such as a button click or select tag.
Dropdowns can be single or multi-selectable lists. Dropdowns can contain icons for clarity, and also headers for sub-lists.
- Filter and sort interactions
- Selection lists
|Move focus to next item. If the current focus is the last item, the focus will cycle to the first item|
|Move focus to previous item. If the current focus is the first item, the focus will cycle to the last item|
|Move focus to first item|
|Move focus to last item|
|Select item and close dropdown (if |
|Move focus to next non-disabled item. If the currently focused item is the last item, the focus will leave the component and close dropdown|
|Move focus to previous non-disabled item. If the currently focused item is the first item, the focus will leave the component and close dropdown|
Opens or closes the dropdown
allow the dropdown to remain open after a selection is made if the selection-mode of the selected item's containing group is "none", the dropdown will always close
is the dropdown disabled
Defines the available placements that can be used when a flip occurs.
specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
Determines where the dropdown will be positioned relative to the button.
specify the scale of dropdown, defaults to m
**read-only** The currently selected items
specify whether the dropdown is opened by hover or click of a trigger element
specify the width of dropdown
fires when a dropdown has been closed
fires when a dropdown has been opened
fires when a dropdown item has been selected or deselected
Updates the position of the component.
A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
A slot for the element that triggers the dropdown.
the width of the dropdown wrapper