Since Shoelace 2.0

Code stable

Pattern stable

Figma ready

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

Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.

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>

Submenus

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>

As a UX best practice, avoid using more than one level of submenus when possible.

Usage

Capitalization, Icons Usage

Account options

Profile page

Notifications 12

Preferences

Log out

Do use sentence case for all menu elements (menu label, menu items)
Do use the Light icon style
Do use the menu item’s default icon sizes and colors

Don’t

ACCOUNT OPTIONS

Profile Page

Notifications 12

Preferences

Log Out

Don’t use title case or all caps for menu elements (menu label, menu items)
Don’t use an icon style or library other than Font Awesome Light
Don’t use custom colors and sizes for icons

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

Name	Name	React Event	Details
`sl-select`	`sl-select`	`onSlSelect`	`{ item: SlMenuItem }` Emitted when a menu item is selected.

sl-select

onSlSelect

{ item: SlMenuItem }

Emitted when a menu item is selected.

Learn more about events.

Menu

Examples

Basic Menu

In Dropdowns

Submenus

Usage

Slots

Events