Menu
sl-menu
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.
<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
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.
<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.
Usage
Capitalization, Icons
Do
- Do use sentence case for all menu elements (menu label, menu items)
- Do use the
Lighticon style - Do use the menu item’s default icon sizes and colors
Don’t
- 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 | Name | React Event | Details | |
|---|---|---|---|---|---|
sl-select
|
sl-select
|
sl-select
|
onSlSelect
|
Emitted when a menu item is selected. |
Learn more about events.