The <menu> Element
As defined in the HTML Living Standard, the <menu> element represents a list of items where each item is a command that the user can perform. It is a semantic alternative to the <ul> element for toolbars and command lists.
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
View HTML Living Standard: The menu element
Menu vs. Unordered List
Technically, a <menu> and a <ul> are almost identical in behavior—both contain <li> children. The difference is purely intent:
<ul>: For any general list of items.<menu>: Specifically for lists of interactive controls (commands) like buttons or links that perform an action on the current page.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <menu>, you explicitly define the list as a functional grouping. While current screen readers often announce both tags as a "list," using the correct semantic tag prepares your document for future assistive technology improvements that may specifically identify "Toolbars" or "Command Menus" based on this element.
Accessibility Implementation
To provide a truly accessible menu experience, the <menu> element is often supplemented with ARIA roles:
role="toolbar": If the menu is a collection of tools, apply this role to provide specialized keyboard navigation hints.- Keyboard Navigation: When a list of items is functionally a menu, users expect the Arrow Keys to move between items. Use JavaScript to manage focus between buttons within the
<menu>.
A11y Tip: Interactive Children
A <menu> is only semantic if it contains interactive children. If the list is purely static text, use <ul> instead. Ensure that every button inside the menu has a clear accessible name (WCAG SC 4.1.2).