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
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>
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 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 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>
As a UX best practice, avoid using more than one level of submenus when possible.
Slots
| Name | Description |
|---|---|
| (default) | The menu’s content, including menu items, menu labels, and dividers. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
dark
|
Render the menu in dark mode |
|
boolean
|
false
|
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.