Menu Item
Examples
Disabled
Prefix & Suffix
Checkbox Menu Items
Submenus
Value & Selection
Importing
Slots
Properties
Methods
Parts
Dependencies

Menu Item

<sl-menu-item> | SlMenuItem

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

Submenu

Submenu Option 1

Submenu Option 2

Submenu Option 3

Sub-submenu Option 1

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

import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>Option 1</SlMenuItem>
    <SlMenuItem>Option 2</SlMenuItem>
    <SlMenuItem>Option 3</SlMenuItem>
    <SlDivider />
    <SlMenuItem type="checkbox" checked>
      Checkbox
    </SlMenuItem>
    <SlMenuItem disabled>Disabled</SlMenuItem>
    <SlDivider />
    <SlMenuItem>
      Prefix Icon
      <SlIcon slot="prefix" name="gift" />
    </SlMenuItem>
    <SlMenuItem>
      Suffix Icon
      <SlIcon slot="suffix" name="heart" />
    </SlMenuItem>
  </SlMenu>
);

Examples

Disabled

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

Option 1

Option 2

Option 3

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

import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>Option 1</SlMenuItem>
    <SlMenuItem disabled>Option 2</SlMenuItem>
    <SlMenuItem>Option 3</SlMenuItem>
  </SlMenu>
);

Prefix & Suffix

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

Home

Messages 12

Settings

<sl-menu style="max-width: 200px;">
  <sl-menu-item>
    <sl-icon slot="prefix" name="house"></sl-icon>
    Home
  </sl-menu-item>

  <sl-menu-item>
    <sl-icon slot="prefix" name="envelope"></sl-icon>
    Messages
    <sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
  </sl-menu-item>

  <sl-divider></sl-divider>

  <sl-menu-item>
    <sl-icon slot="prefix" name="gear"></sl-icon>
    Settings
  </sl-menu-item>
</sl-menu>

import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem>
      <SlIcon slot="prefix" name="house" />
      Home
    </SlMenuItem>

    <SlMenuItem>
      <SlIcon slot="prefix" name="envelope" />
      Messages
      <SlBadge slot="suffix" variant="primary" pill>
        12
      </SlBadge>
    </SlMenuItem>

    <SlDivider />

    <SlMenuItem>
      <SlIcon slot="prefix" name="gear" />
      Settings
    </SlMenuItem>
  </SlMenu>
);

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

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

import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem type="checkbox">Autosave</SlMenuItem>
    <SlMenuItem type="checkbox" checked>
      Check Spelling
    </SlMenuItem>
    <SlMenuItem type="checkbox">Word Wrap</SlMenuItem>
  </SlMenu>
);

Submenus

See the Submenus section of the menu component.

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 sl-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.

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

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

  menu.addEventListener('sl-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>

import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';

const App = () => {
  function handleSelect(event) {
    const item = event.detail.item;

    // Toggle checked state
    item.checked = !item.checked;

    // Log value
    console.log(`Selected value: ${item.value}`);
  }

  return (
    <SlMenu style={{ maxWidth: '200px' }} onSlSelect={handleSelect}>
      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
    </SlMenu>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/menu-item/menu-item.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/menu-item/menu-item.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';

To import this component as a React component:

import { SlMenuItem } from '@shoelace-style/shoelace/dist/react';

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.

Learn more about using slots.

Properties

Name	Description	Type	Default
`type`	The type of menu item to render. To use `checked`, this value must be set to `checkbox`.	`'normal' \| 'checkbox'`	`'normal'`
`checked`	Draws the item in a checked state.	`boolean`	`false`
`value`	A unique value to store in the menu item. This can be used as a way to identify menu items when selected.	`string`	`''`
`disabled`	Draws the menu item in a disabled state, preventing selection.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

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

Learn more about methods.

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.
`submenu-icon`	The submenu icon, visible only when the menu item has a submenu (not yet implemented).

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>
<sl-popup>

Examples

Disabled

Prefix & Suffix

Checkbox Menu Items

Submenus

Value & Selection

Importing

Slots

Properties

Methods

Parts

Dependencies