Menu
<sl-menu> | SlMenu
Menus provide a list of options for the user to choose from.
You can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.
<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>
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.
Examples
Variants
There are 3 styles of the menu: Default, transparent, and dark mode.
<div style="display: flex; gap: 24px; flex-wrap: wrap; max-width: 800px;"> <sl-menu style="max-width: 150px;"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> </sl-menu> <sl-menu style="max-width: 150px;" variant="transparent"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> </sl-menu> <sl-menu style="max-width: 150px;" variant="dark"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> </sl-menu> </div>
Scrollable Menu
Menus can be scrollable to fit a fixed height or space. The max height can be set using the custom property < –max-height >
<div style="display: flex; gap: 24px; flex-wrap: wrap; max-width: 800px;"> <sl-menu style="max-width: 236px;" scrollable variant="default"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> <sl-menu-item value="item-8">Label</sl-menu-item> <sl-menu-item value="item-9">Label</sl-menu-item> <sl-menu-item value="item-10">Label</sl-menu-item> <sl-menu-item value="item-11">Label</sl-menu-item> <sl-menu-item value="item-12">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-13">Label</sl-menu-item> <sl-menu-item value="item-14">Label</sl-menu-item> </sl-menu> <sl-menu style="max-width: 236px;" scrollable variant="transparent"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> <sl-menu-item value="item-8">Label</sl-menu-item> <sl-menu-item value="item-9">Label</sl-menu-item> <sl-menu-item value="item-10">Label</sl-menu-item> <sl-menu-item value="item-11">Label</sl-menu-item> <sl-menu-item value="item-12">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-13">Label</sl-menu-item> <sl-menu-item value="item-14">Label</sl-menu-item> </sl-menu> <sl-menu style="max-width: 236px;" scrollable variant="dark"> <sl-menu-label>Menu Label</sl-menu-label> <sl-menu-item value="item-1">Label</sl-menu-item> <sl-menu-item value="item-2">Label</sl-menu-item> <sl-menu-item value="item-3">Label</sl-menu-item> <sl-menu-item value="item-4">Label</sl-menu-item> <sl-menu-item value="item-5">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-6">Label</sl-menu-item> <sl-menu-item value="item-7">Label</sl-menu-item> <sl-menu-item value="item-8">Label</sl-menu-item> <sl-menu-item value="item-9">Label</sl-menu-item> <sl-menu-item value="item-10">Label</sl-menu-item> <sl-menu-item value="item-11">Label</sl-menu-item> <sl-menu-item value="item-12">Label</sl-menu-item> <sl-divider></sl-divider> <sl-menu-item value="item-13">Label</sl-menu-item> <sl-menu-item value="item-14">Label</sl-menu-item> </sl-menu> </div>
Slots
Optional slots have been added to the start and bottom of the menu for custom content. In some cases this content can be interacted with and influence other components. Here are a few examples:
<div style="display: flex; gap: 24px; flex-wrap: wrap; max-width: 800px;"> <sl-menu style="max-width: 200px;"> <slot-text slot="start" href="/manage-tags"> Manage Tags </slot-text> <sl-menu-item type="checkbox">Positive</sl-menu-item> <sl-menu-item type="checkbox" checked>Negative</sl-menu-item> <sl-menu-item type="checkbox">Opportunity</sl-menu-item> <sl-menu-item type="checkbox">Workaround</sl-menu-item> </sl-menu> <sl-menu style="max-width: 200px;"> <sl-menu-label>Family Group</sl-menu-label> <sl-menu-item>Account 1</sl-menu-item> <sl-menu-item>Account 2</sl-menu-item> <sl-menu-item>Account 3</sl-menu-item> <sl-menu-item>Account 4</sl-menu-item> <sl-button slot="bottom" variant="secondary" size="small"> Create a New Account <sl-icon name="plus" style="margin-left: 0.25rem;"></sl-icon> </sl-button> </sl-menu> <sl-menu style="max-width: 200px;"> <tag-group> All</span> </tag-group> <sl-menu-item type="checkbox">Positive</sl-menu-item> <sl-menu-item type="checkbox" checked>Negative</sl-menu-item> <sl-menu-item type="checkbox">Opportunity</sl-menu-item> <sl-menu-item type="checkbox">Workaround</sl-menu-item> </sl-menu> </div>
Custom Menu items
Similar to slots above, <sl-menu-item> can be slotted in with other components or custom
content.
<sl-menu> <sl-menu-label>Investment Accounts</sl-menu-label> <sl-menu-item custom> <sl-account-tile account-id="123" account-name="John Smith" account-number="ACC001" account-product="Investment" account-balance="$10,000" account-status="Active" account-as-at-date="2025-02-21" active ></sl-account-tile> </sl-menu-item> <sl-menu-item custom> <sl-account-tile account-id="456" account-name="Bob Shmit" account-number="ACC002" account-product="Super-Pension (AB)" account-balance="$100,000" account-status="Active" account-as-at-date="2020-02-21" active ></sl-account-tile> </sl-menu-item> <sl-menu-item custom> <sl-account-tile account-id="789" account-name="Jeff Ballard" account-number="ACC003" account-product="Superannuation" account-balance="$1,000,000" account-status="Inactive" account-as-at-date="1975-02-21" active ></sl-account-tile> </sl-menu-item> </sl-menu>
In Dropdowns
Menus work really well when used inside dropdowns.
<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.
<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.
Variables
For a dark menu, use the dark attribute on the menu component.
<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 variant="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 to the nested
menu-item.
<sl-menu style="max-width: 200px;"> <sl-menu-item value="Item1" active>Active item</sl-menu-item> <sl-menu-item value="Item2">Inactive item 1</sl-menu-item> <sl-menu-item value="Item3">Inactive item 2</sl-menu-item> </sl-menu> <br /><br /> <sl-menu variant="dark" style="max-width: 200px;"> <sl-menu-item value="Item1" active>Active item</sl-menu-item> <sl-menu-item value="Item2">Inactive item 1</sl-menu-item> <sl-menu-item value="Item3">Inactive item 2</sl-menu-item> </sl-menu>
Slots
| Name | Description |
|---|---|
| (default) | The menu’s content, including menu items, menu labels, and dividers. |
start
|
Content to display at the top of the menu. |
bottom
|
Content to display at the bottom of the menu. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
The variant of the menu: default, transparent, or dark |
|
'default' | 'transparent' | 'dark'
|
'default'
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-select |
|
Emitted when a menu item is selected. |
{ item: SlMenuItem }
|
Learn more about events.