Components Menu

Menu Item

<wa-menu-item> Since 2.0 Stable

Menu items provide options for the user to pick from in a menu.

Option 1 Option 2 Option 3 Checkbox Disabled Prefix Icon Suffix Icon 
<wa-menu style="max-width: 200px;">
  <wa-menu-item>Option 1</wa-menu-item>
  <wa-menu-item>Option 2</wa-menu-item>
  <wa-menu-item>Option 3</wa-menu-item>
  <wa-divider></wa-divider>
  <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
  <wa-menu-item disabled>Disabled</wa-menu-item>
  <wa-divider></wa-divider>
  <wa-menu-item>
    Prefix Icon
    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
  </wa-menu-item>
  <wa-menu-item>
    Suffix Icon
    <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
  </wa-menu-item>
</wa-menu>

Examples

Prefix & Suffix

Add content to the start and end of menu items using the prefix and suffix slots.

Home Messages 12 Settings 
<wa-menu style="max-width: 200px;">
  <wa-menu-item>
    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
    Home
  </wa-menu-item>

  <wa-menu-item>
    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
    Messages
    <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
  </wa-menu-item>

  <wa-divider></wa-divider>

  <wa-menu-item>
    <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
    Settings
  </wa-menu-item>
</wa-menu>

Disabled

Add the disabled attribute to disable the menu item so it cannot be selected.

Option 1 Option 2 Option 3 
<wa-menu style="max-width: 200px;">
  <wa-menu-item>Option 1</wa-menu-item>
  <wa-menu-item disabled>Option 2</wa-menu-item>
  <wa-menu-item>Option 3</wa-menu-item>
</wa-menu>

Loading

Use the loading attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.

Option 1 Option 2 Option 3 
<wa-menu style="max-width: 200px;">
  <wa-menu-item>Option 1</wa-menu-item>
  <wa-menu-item loading>Option 2</wa-menu-item>
  <wa-menu-item>Option 3</wa-menu-item>
</wa-menu>

Checkbox Menu Items

Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.

Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you'd find in the menu of a native app.

Autosave Check Spelling Word Wrap 
<wa-menu style="max-width: 200px;">
  <wa-menu-item type="checkbox">Autosave</wa-menu-item>
  <wa-menu-item type="checkbox" checked>Check Spelling</wa-menu-item>
  <wa-menu-item type="checkbox">Word Wrap</wa-menu-item>
</wa-menu>

Value & Selection

The value attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the wa-select event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item's value, its checked state, and more.

Option 1 Option 2 Option 3 Checkbox 4 Checkbox 5 Checkbox 6 
<wa-menu class="menu-value" style="max-width: 200px;">
  <wa-menu-item value="opt-1">Option 1</wa-menu-item>
  <wa-menu-item value="opt-2">Option 2</wa-menu-item>
  <wa-menu-item value="opt-3">Option 3</wa-menu-item>
  <wa-divider></wa-divider>
  <wa-menu-item type="checkbox" value="opt-4">Checkbox 4</wa-menu-item>
  <wa-menu-item type="checkbox" value="opt-5">Checkbox 5</wa-menu-item>
  <wa-menu-item type="checkbox" value="opt-6">Checkbox 6</wa-menu-item>
</wa-menu>

<script>
  const menu = document.querySelector('.menu-value');

  menu.addEventListener('wa-select', event => {
    const item = event.detail.item;

    // Log value
    if (item.type === 'checkbox') {
      console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
    } else {
      console.log(`Selected value: ${item.value}`);
    }
  });
</script>

Slots

Learn more about using slots.

Name Description
(default) The menu item's label.
prefix Used to prepend an icon or similar element to the menu item.
suffix Used to append an icon or similar element to the menu item.
submenu Used to denote a nested menu.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
type
type
The type of menu item to render. To use checked, this value must be set to checkbox.
Type 'normal' | 'checkbox'
Default 'normal'
checked
checked
Draws the item in a checked state.
Type boolean
Default false
value
value
A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
Type string
Default ''
loading
loading
Draws the menu item in a loading state.
Type boolean
Default false
disabled
disabled
Draws the menu item in a disabled state, preventing selection.
Type boolean
Default false
label
label
The option’s plain text label. Usually automatically generated, but can be useful to provide manually for cases involving complex content.
Type string
defaultLabel
The default label, generated from the element contents. Will be equal to label in most cases.
Type string
Default ''
withSubmenu
with-submenu
Used for SSR purposes. If true, will render a ">" caret icon for showing that it has a submenu, but will be non-interactive.
Type boolean
Default false

CSS custom properties

Learn more about CSS custom properties.

Name Description
--background-color-hover
The menu item's background color on hover.
--text-color-hover
The label color on hover.
--submenu-offset
The distance submenus shift to overlap the parent menu.
Default -2px

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.
checked-icon The checked icon, which is only visible when the menu item is checked.
prefix The prefix container.
label The menu item label.
suffix The suffix container.
spinner The spinner that shows when the menu item is in the loading state.
spinner__base The spinner's base part.
submenu-icon The submenu icon, visible only when the menu item has a submenu (not yet implemented).

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/menu-item/menu-item.js';
Coming soon! Coming soon!
    No results