HTML <menu> Tag – The Menu Element

Definition and Usage

The <menu> tag represents an unordered list of command items, such as a toolbar menu, that the user can activate.

Each <li> tag, which defines an individual item within this element, is designed to represent a command item that the user can activate.

Menu Lists for Apps or Toolbars

The specification defines the <menu> tag as simply a semantic alternative to the <ul> tag for representing an unordered list of commands (“toolbar menu”). Most browsers render this tag identically to the <ul> tag. Therefore, styling the menu to appear as a toolbar menu depends on CSS.

Basic Example

HTML

<div>
    <p>w3.org provides the latest updates on web standards.</p>
    <menu>
        <li><button type="button">Like!</button></li>
        <li><button type="button">Subscribe</button></li>
    </menu>
</div>

Usage Notes

Both the <menu> and <ul> tags represent an unordered list of items.

However, as explained earlier, although most browsers render the <menu> and <ul> tags identically, the specification distinguishes the <menu> tag from the <ul> tag in terms of semantics.

Key Semantic Differences Between the menu Tag and the ul Tag
`<ul>`	Primarily intended for displaying content items
`<menu>`	Designed for interactive items, such as buttons or a list of commands

Considering these key differences, the specification describes how the <menu> tag should be used. However, since most browsers render these two tags identically, they should be distinguished semantically. That said, there is no need to differentiate them based on the default styles provided by browsers.

Let's examine the following example, which demonstrates the markup for a toolbar in an editing application.

HTML - Using the <menu> Tag

<menu>
    <li><button type="button" onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
    <li><button type="button" onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
    <li><button type="button" onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>

In browsers, the example above is rendered identically to the following code:

HTML - Using the <ul> Tag

<ul>
    <li><button type="button" onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
    <li><button type="button" onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
    <li><button type="button" onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</ul>

As shown here, these two tags are treated identically in terms of rendering, and they share the same syntax and structure.

Permitted Content and Important Notes

The content that can be used as child elements of the <menu> tag is limited

<li>
<script>
<template>

Except for zero or more of these elements, other elements or the insertion of text (that is, a text node) are not allowed.

The following examples show incorrect cases that use content not permitted within the <menu> tag, as well as correct cases.

HTML - Incorrect Example The <p> tag is used as a child of the <menu> tag, which is not permitted.

<div>
    <menu>
        <p>w3.org provides the latest updates on web standards.</p>
        <li><button type="button">Like!</button></li>
        <li><button type="button">Subscribe</button></li>
    </menu>
</div>

HTML - Incorrect Example Plain text is used directly within the <menu> tag.

<div>
    <menu>
        w3.org provides the latest updates on web standards.
        <li><button type="button">Like!</button></li>
        <li><button type="button">Subscribe</button></li>
    </menu>
</div>

HTML - Correct Example

<div>
    <p>w3.org provides the latest updates on web standards.</p>
    <menu>
        <li><button type="button">Like!</button></li>
        <li><button type="button">Subscribe</button></li>
    </menu>
</div>

Technical Summary

Technical Summary of the menu tag
Permitted parents	Any element that accepts flow content.
Permitted content	Zero or more `<li>`, `<script>`, and `<template>` elements.
Implicit ARIA `role`	`list`
Permitted ARIA `roles`	`directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar`, `tree`