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 | truefalse | |
| 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 | truefalse | |
| disabled | disabled | is the dropdown disabled | truefalse | |
| 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. | bottombottom-endbottom-leadingbottom-startbottom-trailingtoptop-endtop-leadingtop-starttop-trailing | |
| scale | scale | specify the scale of dropdown, defaults to m | lm (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 | lms |
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 |