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.

  Copy⌘C
  Cut⌘X
  Delete

<!-- dropdown is an overlay that won't render on a static stage, so the items show among dimmed siblings. -->
<div style="display: flex; flex-direction: column;">
  <wa-dropdown-item><wa-icon slot="icon" name="copy"></wa-icon>Copy<span slot="details">⌘C</span></wa-dropdown-item>
  <wa-dropdown-item data-anatomy-subject="true"
    ><wa-icon slot="icon" name="scissors"></wa-icon>Cut<span slot="details">⌘X</span></wa-dropdown-item
  >
  <wa-dropdown-item><wa-icon slot="icon" name="trash"></wa-icon>Delete</wa-dropdown-item>
</div>

API

Link to This Section

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.18.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`
`download` `download`	Tells the browser to download the linked file as this filename. Only used when `href` is present. Type `string`
`href` `href`	When set, selecting the item will navigate to this URL. The item remains a menu item for assistive devices, so make sure the label describes where the link goes. Ignored when the item has a submenu. Type `string`
`rel` `rel`	When using `href`, this attribute will map to the underlying link's `rel` attribute. Type `string`
`submenuOpen` `submenuOpen`	Whether the submenu is currently open. Type `boolean` Default `false`
`target` `target`	Tells the browser where to open the link. Only used when `href` is present. Type `'_blank' \| '_parent' \| '_self' \| '_top'`
`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.

Custom States

Link to This Section

Learn more about custom states.

Name	Description	CSS selector
`active`	Applied when the item is the active item in the menu.	`:state(active)`
`checked`	Applied when the item is checked.	`:state(checked)`
`disabled`	Applied when the item is disabled.	`:state(disabled)`
`has-submenu`	Applied when the item has a submenu.	`:state(has-submenu)`
`link`	Applied when the item is a link (i.e. `href` is set).	`:state(link)`
`submenu-open`	Applied when the item's submenu is open.	`:state(submenu-open)`

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