<wa-menu>
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.
<wa-menu style="max-width: 200px;"> <wa-menu-item value="undo">Undo</wa-menu-item> <wa-menu-item value="redo">Redo</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item value="cut">Cut</wa-menu-item> <wa-menu-item value="copy">Copy</wa-menu-item> <wa-menu-item value="paste">Paste</wa-menu-item> <wa-menu-item value="delete">Delete</wa-menu-item> </wa-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.
Menus work really well when used inside dropdowns.
<wa-dropdown> <wa-button slot="trigger" caret>Edit</wa-button> <wa-menu> <wa-menu-item value="cut">Cut</wa-menu-item> <wa-menu-item value="copy">Copy</wa-menu-item> <wa-menu-item value="paste">Paste</wa-menu-item> </wa-menu> </wa-dropdown>
To create a submenu, nest an <wa-menu slot="submenu"> in any
menu item.
<wa-menu style="max-width: 200px;"> <wa-menu-item value="undo">Undo</wa-menu-item> <wa-menu-item value="redo">Redo</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item value="cut">Cut</wa-menu-item> <wa-menu-item value="copy">Copy</wa-menu-item> <wa-menu-item value="paste">Paste</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item> Find <wa-menu slot="submenu"> <wa-menu-item value="find">Find…</wa-menu-item> <wa-menu-item value="find-previous">Find Next</wa-menu-item> <wa-menu-item value="find-next">Find Previous</wa-menu-item> </wa-menu> </wa-menu-item> <wa-menu-item> Transformations <wa-menu slot="submenu"> <wa-menu-item value="uppercase">Make uppercase</wa-menu-item> <wa-menu-item value="lowercase">Make lowercase</wa-menu-item> <wa-menu-item value="capitalize">Capitalize</wa-menu-item> </wa-menu> </wa-menu-item> </wa-menu>
As a UX best practice, avoid using more than one level of submenus when possible.
| Name | Description |
|---|---|
| (default) | The menu's content, including menu items, menu labels, and dividers. |
| Name | Description |
|---|---|
wa-select |
Emitted when a menu item is selected. |
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/menu/menu.js';