: The Menu element - HTML: HyperText Markup Language | MDN (original) (raw)
Baseline
Widely available
The <menu>
HTML element is described in the HTML specification as a semantic alternative to , but treated by browsers (and exposed through the accessibility tree) as no different than
. It represents an unordered list of items (which are represented by elements).
Try it
<div class="news">
<a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
Attributes
This element only includes the global attributes.
Usage notes
The <menu>
and elements both represent an unordered list of items. The key difference is that
primarily contains items for display, while
<menu>
represents a toolbar containing commands that the user can perform or activate.
**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
Technical summary
Content categories | Flow content. If the element's children include at least one element:Palpable content. |
---|---|
Permitted content | Zero or more occurrences of , |