<menu>

<menu> represents an unordered list of commands. Modern browsers generally render and expose it like <ul>; it does not create a right-click menu automatically.

Commands with real buttons

The buttons change a visible note. Their native Tab, Enter, and Space behavior works independently of the menu wrapper.

<menu>
  <li><button type="button" id="short">Show short note</button></li>
  <li><button type="button" id="long">Show longer note</button></li>
</menu>
<p id="note" role="status">Choose a note.</p>
<script>
  const note = document.querySelector('#note'); document.querySelector('#short').onclick = () => { note.textContent = 'Water gently.'; }; document.querySelector('#long').onclick = () => { note.textContent = 'Water gently and check that the pot drains.'; };
</script>

menu {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
button {
  padding: 0.5rem;
}

Content and obsolete features

A menu contains li items and permitted script-supporting elements. The historic type="context" mechanism is obsolete; do not teach it as a working modern context-menu API.

HTML menu is different from ARIA role="menu", which describes a widget with a specific keyboard interaction pattern. Do not add that role to an ordinary list of buttons unless you implement and test the full pattern.

Alternatives and exercise

Use nav with links for major navigation, ul for general unordered items, and native buttons for actions. Tab to both example buttons and activate them with Space; the status text should change without navigating anywhere.

Sources and browser support

MDN: menu describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.