Dropdown
Calcite Dropdowns are floating lists that can be revealed by an event such as a button click or select tag.
Overview
Dropdowns can be single or multi-selectable lists. Dropdowns can contain icons for clarity, and also headers for sub-lists.
Usage
- Filter and sort interactions
- Selection lists
Sample
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow down | Move focus to next item. If the current focus is the last item, the focus will cycle to the first item |
Arrow up | Move focus to previous item. If the current focus is the first item, the focus will cycle to the last item |
Home | Move focus to first item |
End | Move focus to last item |
Enter | Select item and close dropdown (if disable close on select is not true, which is default) |
Tab | 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 |
Tab and Shift | 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 |
API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
active | active | Opens or closes the dropdown | true false | |
disableCloseOnSelect | disable-close-on-select | 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 | true false | |
disabled | disabled | is the dropdown disabled | true false | |
flipPlacements | Defines the available placements that can be used when a flip occurs. | ComputedPlacement[] | ||
maxItems | max-items | 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 | 0 (default) | |
overlayPositioning | overlay-positioning | Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. | absolute (default) fixed | |
placement | placement | Determines where the dropdown will be positioned relative to the button. | bottom bottom-end bottom-leading bottom-start bottom-trailing top top-end top-leading top-start top-trailing | |
scale | scale | specify the scale of dropdown, defaults to m | l m (default) s | |
selectedItems | **read-only** The currently selected items | HTMLCalciteDropdownItemElement[] | ||
type | type | specify whether the dropdown is opened by hover or click of a trigger element | click (default) hover | |
width | width | specify the width of dropdown | l m s |
Events
Name | Description | Detail |
---|---|---|
calciteDropdownClose | fires when a dropdown has been closed | void |
calciteDropdownOpen | fires when a dropdown has been opened | void |
calciteDropdownSelect | fires when a dropdown item has been selected or deselected | void |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
reposition | Updates the position of the component. | reposition() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s. |
dropdown-trigger | A slot for the element that triggers the dropdown. |
Styles
Name | Description | CSS Variable |
---|---|---|
--calcite-dropdown-width | the width of the dropdown wrapper | --calcite-dropdown-width |