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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
Arrow downMove focus to next item. If the current focus is the last item, the focus will cycle to the first item
Arrow upMove focus to previous item. If the current focus is the first item, the focus will cycle to the last item
HomeMove focus to first item
EndMove focus to last item
EnterSelect item and close dropdown (if disable close on select is not true, which is default)
TabMove 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 ShiftMove 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

calcite-dropdown
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Opens or closes the dropdown

booleanA boolean property should be present, or not
truefalse
disableCloseOnSelectdisable-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

booleanA boolean property should be present, or not
truefalse
disableddisabled

is the dropdown disabled

booleanA boolean property should be present, or not
truefalse
flipPlacements

Defines the available placements that can be used when a flip occurs.

optional
typedChoose from a set of typed values
ComputedPlacement[]
maxItemsmax-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

numberA number
0 (default)
overlayPositioningoverlay-positioning

Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.

typedChoose from a set of typed values
absolute (default)fixed
placementplacement

Determines where the dropdown will be positioned relative to the button.

typedChoose from a set of typed values
bottombottom-endbottom-leadingbottom-startbottom-trailingtoptop-endtop-leadingtop-starttop-trailing
scalescale

specify the scale of dropdown, defaults to m

typedChoose from a set of typed values
lm (default)s
selectedItems

**read-only** The currently selected items

read-only
element(s)An element or elements
HTMLCalciteDropdownItemElement[]
typetype

specify whether the dropdown is opened by hover or click of a trigger element

typedChoose from a set of typed values
click (default)hover
widthwidth

specify the width of dropdown

optional
typedChoose from a set of typed values
lms

Events

NameDescriptionDetail
calciteDropdownClose

fires when a dropdown has been closed

bubblescomposedcancelable
void
calciteDropdownOpen

fires when a dropdown has been opened

bubblescomposedcancelable
void
calciteDropdownSelect

fires when a dropdown item has been selected or deselected

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
reposition

Updates the position of the component.

reposition() => Promise<void>Promise<void>

Slots

NameDescription
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

NameDescriptionCSS Variable
--calcite-dropdown-width

the width of the dropdown wrapper

--calcite-dropdown-width

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