Dropdown Item
<wa-dropdown-item>
Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable items, and submenu triggers.
This component must be used as a child of <wa-dropdown>. Please see the Dropdown docs to see examples of this component in action.
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/dropdown-item/dropdown-item.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/dropdown-item/dropdown-item.js';
To import this component for React 18 or below, use the following code:
import WaDropdownItem from '@awesome.me/webawesome/dist/react/dropdown-item/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The dropdown item's label. |
details
|
Additional content or details to display after the label. |
icon
|
An optional icon to display before the label. |
submenu
|
Submenu items, typically <wa-dropdown-item> elements, to create a nested menu. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
checkedchecked |
Set to true to check the dropdown item. Only valid when
type is checkbox.Type
booleanDefault
false |
||
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
disableddisabled |
Disables the dropdown item.
Type
booleanDefault
false |
|
|
submenuOpensubmenuOpen |
Whether the submenu is currently open.
Type
booleanDefault
false |
|
|
typetype |
Set to
checkbox to make the item a checkbox.Type
'normal' | 'checkbox'Default
'normal' |
|
|
valuevalue |
An optional value for the menu item. This is useful for determining which item was selected when listening to the
dropdown's
wa-select event.Type
string |
||
variantvariant |
The type of menu item to render.
Type
'danger' | 'default'Default
'default' |
|
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
closeSubmenu() |
Closes the submenu. | |
openSubmenu() |
Opens the submenu. |
Events
Learn more about events.
| Name | Description |
|---|---|
blur |
Emitted when the dropdown item loses focus. |
focus |
Emitted when the dropdown item gains focus. |
CSS parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
checkmark |
The checkmark icon (a <wa-icon> element) when the item is a checkbox. |
::part(checkmark)
|
details |
The container for the details slot. |
::part(details)
|
icon |
The container for the icon slot. |
::part(icon)
|
label |
The container for the label slot. |
::part(label)
|
submenu |
The submenu container. |
::part(submenu)
|
submenu-icon |
The submenu indicator icon (a <wa-icon> element). |
::part(submenu-icon)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
