<menu>: The MENU Element
Last updated: 2026-10-13
<menu>The MENU Element
Represents a list of commands or menu items, often a toolbar or context menu; may contain <li> or <button> elements.
| Category | Forms |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </menu> tag |
| Status | Standard |
📝 Syntax
<menu>
<li><button>Copy</button></li>
<li><button>Paste</button></li>
</menu>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
type | Menu type: toolbar (default) or context. | |
label | A human-readable label, often for context menus. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <menu> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： menu is like <ul> but means a command list; rendering support varies—use <ul> for simple lists.
❓ FAQ
QWhat is the difference between menu and nav?
ATheir semantics are close and historically tangled: HTML5 finally defines
<menu> as a toolbar/command menu, semantically equivalent to <ul>. Site navigation belongs to <nav>; in-app toolbars and command lists may use <menu>. In practice, menu usage is very low.QCan menu build a right-click context menu?
AIt used to — the old spec had the
contextmenu attribute plus the menu/menuitem combo — but that design was abandoned entirely and no mainstream browser shipped it. Custom context menus today are JS + custom DOM only.QHow do I write items inside menu?
ASame as
<ul>: children are <li>, and in a command menu each li holds a <button> — the best choice, natively focusable and keyboard-operable. Add role and aria-label on the container for better accessibility.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
