html / latest / element / menu.html /

<menu>: The Menu element

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The <menu> HTML element is a semantic alternative to <ul>. It represents an unordered list of items (represented by <li> elements), each of which represents a link or other command that the user can activate.

Attributes

This element only includes the global attributes.

Usage notes

The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> is intended for interactive items.

Note: In previous versions of the HTML specification, the <menu> element had an additional use case as a context menu. This functionality is now considered obsolete and has been removed from the specification.

Examples

Toolbar

In this example, a <menu> is used to create a toolbar for an editing application.

HTML

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

CSS

menu {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

Result

Technical summary

Content categories

Flow content. If the element's children include at least one <li> element: Palpable content.

Permitted content

Zero or more occurrences of <li>, <script>, and <template>.

Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree
DOM interface HTMLMenuElement

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
menu
1
12
1
6
≤12.1
3
1
18
4
≤12.1
1
1.0
hr_separator
No
No
85
51-85
No
No
No
No
No
51-85
No
No
No
label
No
No
85
8-85
No
No
No
No
No
8-85
Nested menus are not supported.
No
No
No

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu