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
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| disabled | disabled | When true, prevents interaction and decreases the component's opacity. | boolean | false |
| href | href | Specifies 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 | |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | IconName | |
| iconFlipRtl | icon-flip-rtl | When the element direction is right-to-left ("rtl"), flips the component's iconStart and/or iconEnd. | FlipContext | |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | IconName | |
| label | label | Specifies an accessible label for the component. | string | |
| rel | rel | Specifies the relationship to the linked resource defined in href. | string | |
| selected | selected | When true, the component is selected. | boolean | false |
| target | target | Specifies the frame or window to open the linked resource. | string |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding text. |
Styles
| Name | Description |
|---|---|
| --calcite-dropdown-item-background-color-hover | Specifies the component's background color when hovered. |
| --calcite-dropdown-item-background-color-press | Specifies the component's background color when selected or active. |
| --calcite-dropdown-item-icon-color-hover | |
| --calcite-dropdown-item-icon-color-press | Specifies the color of the component's selection icon when selected or active. |
| --calcite-dropdown-item-text-color-press | Specifies the component's text color when selected or active. |
| --calcite-dropdown-item-text-color | Specifies the component's text color. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteDropdownItemSelect | Fires when the component is selected. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |