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.
<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.
<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 Usage
Do
- 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
- 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 | |
---|---|---|---|---|
sl-select
|
sl-select
|
onSlSelect
|
Emitted when a menu item is selected. |
Learn more about events.