index.md

title	slug	page-type	browser-compat
<menu>: The Menu element	Web/HTML/Element/menu	html-element	html.elements.menu

{{HTMLSidebar}}

The <menu> HTML element is described in the HTML specification as a semantic alternative to {{HTMLElement("ul")}}, but treated by browsers (and exposed through the accessibility tree) as no different than {{HTMLElement("ul")}}. It represents an unordered list of items (which are represented by {{HTMLElement("li")}} elements).

{{EmbedInteractiveExample("pages/tabbed/menu.html", "tabbed-shorter")}}

Attributes

This element only includes the global attributes.

Usage notes

The <menu> and {{HTMLElement("ul")}} elements both represent an unordered list of items. The key difference is that {{HTMLElement("ul")}} primarily contains items for display, while <menu> was intended for interactive items. The related {{HTMLElement("menuitem")}} element has been deprecated.

Note: In early versions of the HTML specification, the <menu> element had an additional use case as a context menu. This functionality is considered obsolete and is not in 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>

Note that this is functionally no different from:

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

CSS

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

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

Result

{{EmbedLiveSample("Toolbar", "100%", 100)}}

Technical summary

Content categories	Flow content. If the element's children include at least one {{HTMLElement("li")}} element: Palpable content.
Permitted content	Zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("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	{{DOMxRef("HTMLMenuElement")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, and {{HTMLElement("li")}}.