Skip to main content
Since Shoelace 2.0 Code stable Pattern stable Figma ready

Menu

<sl-menu> | SlMenu

Menus provide a list of options for the user to choose from.

Examples

Basic Menu

You can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.

Undo Redo Cut Copy Paste Delete
<sl-menu style="max-width: 200px;">
  <sl-menu-item value="undo">Undo</sl-menu-item>
  <sl-menu-item value="redo">Redo</sl-menu-item>
  <sl-divider></sl-divider>
  <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-item value="delete">Delete</sl-menu-item>
</sl-menu>
sl-menu style="max-width: 200px;"
  sl-menu-item value="undo" Undo
  sl-menu-item value="redo" Redo
  sl-divider
  sl-menu-item value="cut" Cut
  sl-menu-item value="copy" Copy
  sl-menu-item value="paste" Paste
  sl-menu-item value="delete" Delete
import SlDivider from '@teamshares/shoelace/dist/react/divider';
import SlMenu from '@teamshares/shoelace/dist/react/menu';
import SlMenuItem from '@teamshares/shoelace/dist/react/menu-item';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuItem value="undo">Undo</SlMenuItem>
    <SlMenuItem value="redo">Redo</SlMenuItem>
    <SlDivider />
    <SlMenuItem value="cut">Cut</SlMenuItem>
    <SlMenuItem value="copy">Copy</SlMenuItem>
    <SlMenuItem value="paste">Paste</SlMenuItem>
    <SlMenuItem value="delete">Delete</SlMenuItem>
  </SlMenu>
);

In Dropdowns

Menus work really well when used inside dropdowns.

Edit Cut Copy Paste
<sl-dropdown>
  <sl-button slot="trigger" caret>Edit</sl-button>
  <sl-menu>
    <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>
</sl-dropdown>

To create a submenu, nest an <sl-menu slot="submenu"> in any menu item.

Undo Redo Cut Copy Paste Find Find… Find next Find previous Transformations Make uppercase Make lowercase Capitalize
<sl-menu style="max-width: 200px;">
  <sl-menu-item value="undo">Undo</sl-menu-item>
  <sl-menu-item value="redo">Redo</sl-menu-item>
  <sl-divider></sl-divider>
  <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-divider></sl-divider>
  <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>

Usage

Capitalization, Icons Usage

Slots

Name Details
(default) The menu’s content, including menu items, menu labels, and dividers.

Learn more about using slots.

Events

Name Name React Event Details
sl-select sl-select onSlSelect

{ item: SlMenuItem }

Emitted when a menu item is selected.

Learn more about events.