Dropdown Item

<wa-dropdown-item>

Stable

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

Link to This Section

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.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/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

Link to This Section

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

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`checked` `checked`	Set to true to check the dropdown item. Only valid when `type` is `checkbox`. Type `boolean` Default `false`
`disabled` `disabled`	Disables the dropdown item. Type `boolean` Default `false`
`submenuOpen` `submenuOpen`	Whether the submenu is currently open. Type `boolean` Default `false`
`type` `type`	Set to `checkbox` to make the item a checkbox. Type `'normal' \| 'checkbox'` Default `'normal'`
`value` `value`	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`
`variant` `variant`	The type of menu item to render. Type `'danger' \| 'default'` Default `'default'`

Methods

Link to This Section

Learn more about methods.

Name	Description	Arguments
`closeSubmenu()`	Closes the submenu.
`openSubmenu()`	Opens the submenu.

Events

Link to This Section

Learn more about events.

Name	Description
`blur`	Emitted when the dropdown item loses focus.
`focus`	Emitted when the dropdown item gains focus.

CSS Parts

Link to This Section

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

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Quick Links

Recent Searches