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

3 samples
1
2
3
4
5
6
7
8
9
10
11
<calcite-dropdown width="m">
    <calcite-button slot="trigger">Select landform</calcite-button>
    <calcite-dropdown-group group-title="Natural places">
        <calcite-dropdown-item>Mountain</calcite-dropdown-item>
        <calcite-dropdown-item>River</calcite-dropdown-item>
        <calcite-dropdown-item>Waterfall</calcite-dropdown-item>
        <calcite-dropdown-item>Rainforest</calcite-dropdown-item>
        <calcite-dropdown-item>Tundra</calcite-dropdown-item>
        <calcite-dropdown-item>Desert</calcite-dropdown-item>
    </calcite-dropdown-group>
</calcite-dropdown>
v3.0.0

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

PropertyAttributeDescriptionTypeDefault
closeOnSelectDisabledclose-on-select-disabledWhen true, the component will remain open after a selection is made. If the selectionMode of the selected calcite-dropdown-item's containing calcite-dropdown-group is "none", the component will always close.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
flipPlacementsSpecifies the component's fallback calcite-dropdown-item placement when it's initial or specified placement has insufficient space available.Array<"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start">
maxItemsmax-itemsSpecifies the maximum number of calcite-dropdown-items to display before showing a scroller. Value must be greater than 0, and does not include groupTitle's from calcite-dropdown-group.number0
openopenWhen true, displays and positions the component.booleanfalse
overlayPositioningoverlay-positioningDetermines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed"."absolute" | "fixed""absolute"
placementplacementDetermines where the component will be positioned relative to the container element."bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start""bottom-start"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteDropdownItemElement>
typetypeSpecifies the action to open the component from the container element."click" | "hover""click"
widthwidthSpecifies the width of the component."l" | "m" | "s"
widthScalewidth-scale
deprecatedUse the width property instead.
Specifies the width of the component.
"l" | "m" | "s"

Slots

NameDescription
default (unnamed)A slot for adding calcite-dropdown-group elements. Every calcite-dropdown-item must have a parent calcite-dropdown-group, even if the groupTitle property is not set.
triggerA slot for the element that triggers the calcite-dropdown.

Styles

NameDescription
--calcite-dropdown-widthSpecifies the width of the component's wrapper.

Events

NameDescriptionBehavior
calciteDropdownBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteDropdownBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteDropdownCloseFires when the component is closed and animation is complete.bubblescomposed
calciteDropdownOpenFires when the component is open and animation is complete.bubblescomposed
calciteDropdownSelectFires when a calcite-dropdown-item's selection changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
repositionUpdates the position of the component.reposition(delayed?: boolean): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close