Dropdown

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. Every Dropdown Item must have a parent Dropdown Group.

Usage

  • Filter and sort interactions
  • Selection lists

Sample

Accessibility

Keyboard navigation

KeyFunction
Arrow downIf the component is not open, opens the component. When open, moves focus to next non-disabled calcite-dropdown-item. If the current focus is the last calcite-dropdown-item, focus will cycle to the first calcite-dropdown-item.
Arrow upIf the component is not open, opens the component. When open, moves focus to previous non-disabled calcite-dropdown-item. If the current focus is the first calcite-dropdown-item, the focus will cycle to the last calcite-dropdown-item.
EscIf the component is open, closes the component.
HomeMoves focus to the component's first calcite-dropdown-item.
EndMoves focus to the component's last calcite-dropdown-item.
EnterSelects the active calcite-dropdown-item and when closeOnSelectDisabled is false (default), closes the component.
SpaceSelects the active calcite-dropdown-item and when closeOnSelectDisabled is false (default), closes the component.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.