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 Jump to heading

Prefix & Suffix Jump to heading

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

<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 Jump to heading

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 Jump to heading

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>

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 Jump to heading

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 Jump to heading

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.

Properties Jump to heading

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`
`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`

Methods Jump to heading

Name	Description	Arguments
`getTextLabel()`	Returns a text label based on the contents of the menu item's default slot.

CSS custom properties Jump to heading

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

CSS parts Jump to heading

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 Jump to heading

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

Importing Jump to heading

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/webawesome@3.0.0-alpha.4/dist/components/menu-item/menu-item.js';

Coming soon!

Menu Item

Examples Jump to heading #

Prefix & Suffix Jump to heading #

Disabled Jump to heading #

Loading Jump to heading #

Checkbox Menu Items Jump to heading #

Value & Selection Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #