<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 these represent 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, whilst <menu> is intended for interactive items, to act on.

Note: In previous version 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

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

Specification
HTML Standard # the-menu-element

Browser compatibility

BCD tables only load in the browser