Dropdown Item

<wa-dropdown-item> Since 3.0 experimental

Represents an individual item within a dropdown menu, supporting standard items, checkboxes, and submenus.

This component must be used as a child of <wa-dropdown>. Please see the Dropdown docs to see examples of this component in action.

Slots

Learn more about using slots.

Name Description
(default) The dropdown item's label.
icon An optional icon to display before the label.
details Additional content or details to display after 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
variant
variant
The type of menu item to render.
Type 'danger' | 'default'
Default 'default'
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
type
type
Set to checkbox to make the item a checkbox.
Type 'normal' | 'checkbox'
Default 'normal'
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

Methods

Learn more about methods.

Name Description Arguments
openSubmenu() Opens the submenu.
closeSubmenu() Closes 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
checkmark The checkmark icon (a <wa-icon> element) when the item is a checkbox.
icon The container for the icon slot.
label The container for the label slot.
details The container for the details slot.
submenu-icon The submenu indicator icon (a <wa-icon> element).
submenu The submenu container.

Dependencies

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

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/dropdown-item/dropdown-item.js';

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';

To manually import this component from React, use the following code. 

import '@awesome.me/webawesome/dist/react/dropdown-item';
Need a hand? Report a bug Ask for help
    No results