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

Examples

Variants

There are 2 styles of the menu item; Default and dark mode. The default menu-item state does not have a background fill as that is set by the menu component.

Label
Label 
<div style="display: flex; gap: 24px;">
  <sl-menu style="max-width: 200px;">
    <sl-menu-item>
      <sl-icon slot="suffix" name="gear"></sl-icon>
      Label
    </sl-menu-item>
  </sl-menu>
  <br/>
  <sl-menu dark style="max-width: 200px;">
    <sl-menu-item>
      <sl-icon slot="suffix" name="gear"></sl-icon>
      Label
    </sl-menu-item>
  </sl-menu>
</div>

Prefix & Suffix slots

Prefix and suffix slots can be used to add content to the start and end of menu items. Add content to the start and end of menu items using prefix and suffix. Normally this uses <sl-icon> for decorative purposes but can be other components aswell.

Home Messages 12 Settings Home Messages 12 Settings 
<div style="display: flex; gap: 24px;">
  <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>

  <sl-menu dark 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>
</div>

Checkbox Menu Items

The checkbox attribute allows menu items to be toggled on and off when selected. <– <Sl-checkbox> is also used prefixed to the menu item.

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>

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 
<sl-menu style="max-width: 200px;">
  <sl-menu-item>Option 1</sl-menu-item>
  <sl-menu-item loading>Option 2</sl-menu-item>
  <sl-menu-item>Option 3</sl-menu-item>
</sl-menu>

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>

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.

Option 1 Option 2 Option 3 Checkbox 4 Checkbox 5 Checkbox 6 
<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 disabled 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>

Dark / light modes

For a dark menu, use the dark attribute on the menu component.

Cut Copy Paste

Cut Copy Paste 
<sl-menu style="max-width: 200px;">
    <sl-menu-item value="cut">Cut</sl-menu-item>
    <sl-menu-item value="copy">Copy</sl-menu-item>
    <sl-menu-item value="paste">Paste</sl-menu-item>
  </sl-menu>
  <br/><br/>
  <sl-menu dark style="max-width: 200px;">
    <sl-menu-item value="cut">Cut</sl-menu-item>
    <sl-menu-item value="copy">Copy</sl-menu-item>
    <sl-menu-item value="paste">Paste</sl-menu-item>
  </sl-menu>

Active menu item

To highlight a menu item as active, apply the active attribute.

Active item Active box Inactive box Inactive item Disabled active

Active item Active box Inactive box Inactive item Disabled active 
  <sl-menu style="max-width: 200px;">
    <sl-menu-item value="Item1" active>Active item</sl-menu-item>
    <sl-menu-item type="checkbox" value="Item2" active>Active box</sl-menu-item>
    <sl-menu-item type="checkbox" value="Item3">Inactive box</sl-menu-item>
    <sl-menu-item value="Item4">Inactive item</sl-menu-item>
    <sl-menu-item value="Item5" active disabled>Disabled active</sl-menu-item>
  </sl-menu>
  <br/><br/>
  <sl-menu dark style="max-width: 200px;">
    <sl-menu-item value="Item1" active>Active item</sl-menu-item>
    <sl-menu-item type="checkbox" value="Item2" active>Active box</sl-menu-item>
    <sl-menu-item type="checkbox" value="Item3">Inactive box</sl-menu-item>
    <sl-menu-item value="Item4">Inactive item</sl-menu-item>
    <sl-menu-item value="Item5" active disabled>Disabled active</sl-menu-item>
  </sl-menu>

Submenu slot is used to denote a nested menu from <sl-menu-item>. This submenu is shown when hovering’. The distance/overlap between the submenus and parent menu can also be customised using the –submenu-offset property which is default -2px.

Find Find… Find Next Find Previous Transformations Make uppercase Make lowercase Capitalize 
<sl-menu style="max-width: 200px;">
  <sl-menu-item>
    Find
    <sl-menu slot="submenu">
      <sl-menu-item value="find">Find…</sl-menu-item>
      <sl-menu-item value="find-previous">Find Next</sl-menu-item>
      <sl-menu-item value="find-next">Find Previous</sl-menu-item>
    </sl-menu>
  </sl-menu-item>
  <sl-menu-item>
    Transformations
    <sl-menu slot="submenu">
      <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
      <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
      <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
    </sl-menu>
  </sl-menu-item>
</sl-menu>

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 Reflects Type Default
dark Render the menu-item in dark mode boolean false
active Render the menu-item as active boolean false
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 ''
loading Draws the menu item in a loading state. boolean false
disabled Draws the menu item in a disabled state, preventing selection. boolean false
custom Whether this menu item contains custom content 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.

Custom Properties

Name Description Default
--submenu-offset The distance submenus shift to overlap the parent menu. -2px

Learn more about customizing CSS custom properties.

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

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-popup>
  • <sl-spinner>