Skip to content

Dropdown Item

Child component of Dropdown

Overview

Each Dropdown Item must be contained within a parent Dropdown Group. This allows multiple Dropdown Group to exist within one Dropdown.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
hrefhrefSpecifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor.string
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
labellabelAccessible name for the component.string
relrelSpecifies the relationship to the linked document defined in href.string
selectedselectedWhen true, the component is selected.booleanfalse
targettargetSpecifies the frame or window to open the linked document.string

Slots

NameDescription
default (unnamed)A slot for adding text.

Styles

NameDescription
--calcite-dropdown-item-background-color-hoverSpecifies the item's background color when hovered.
--calcite-dropdown-item-background-color-pressSpecifies the item's background color when selected or active.
--calcite-dropdown-item-icon-color-hover
deprecated Specifies the item's icon selection color when hovered.
--calcite-dropdown-item-icon-color-pressSpecifies the item's icon selection color when selected or active.
--calcite-dropdown-item-text-color-pressSpecifies the item's text when selected or active.
--calcite-dropdown-item-text-colorSpecifies the item's text color.

Events

NameDescriptionBehavior
calciteDropdownItemSelectFires when the component is selected.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.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.