: The Menu element

{{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.

[!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

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

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