HTML <menu> Tag

What You’ll Learn

The <menu> tag has a varied history in HTML. This guide explains its purpose, syntax, limited browser support, and the modern alternatives beginners should use.

What Is the <menu> Tag?

The <menu> element is an HTML tag originally intended to create context menus, toolbar menus, and lists of commands. It contains <li> elements that represent individual menu actions.

Over time, developers shifted to <nav> with <ul> for site navigation and JavaScript-driven context menus for right-click actions. Learn menu to read legacy code; use proven alternatives in new projects.

📝 Syntax

Wrap your list items between opening and closing <menu> tags:

<menu>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</menu>

Syntax Rules

• <menu> requires both opening and closing tags.
• Child items are typically <li> elements (or <menuitem> in older specs).
• Add type and label attributes for toolbar and context menu patterns.
• Always provide accessible fallbacks because browser support is limited.

<menu type="toolbar" label="File">
  <li>Open</li>
  <li>Save</li>
  <li>Close</li>
</menu>

⚖️ <menu> vs <nav> vs <ul>

Examples Gallery

Toolbar menus, context menus, command lists, and the recommended nav alternative. Demos use CSS styling because native menu behavior is unreliable in modern browsers.

<menu type="toolbar" label="File">
  <li>Open</li>
  <li>Save</li>
  <li>Close</li>
</menu>

<menu type="context" id="context-menu">
  <li>Cut</li>
  <li>Copy</li>
  <li>Paste</li>
</menu>
<div oncontextmenu="showMenu(event)">Right-click me!</div>

<menu type="toolbar" label="Edit">
  <li>Undo</li>
  <li>Redo</li>
  <li>Find</li>
</menu>

<menu>
  <li>Reload</li>
  <li>Settings</li>
  <li>Help</li>
</menu>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

🔄 Alternatives

Given the limited support and potential complications with the <menu> tag, use these proven patterns instead:

• Unordered lists (<ul>) — For most cases where a list of items is needed.
• Context menus with JavaScript — Create custom right-click menus using JavaScript and CSS for greater control and compatibility.
• Toolbar menus with <nav> and <ul> — Build accessible, widely supported toolbar and site navigation.

<nav aria-label="Main">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

♿ Accessibility

Menus must be operable by keyboard and screen reader users:

• Use nav for site navigation — Landmark roles help assistive technology find menus quickly.
• Add aria-label — Name navigation regions when multiple menus exist on a page.
• Keyboard support — Custom context menus need focus traps, Escape to close, and arrow-key navigation.
• Do not rely on menu alone — Limited browser support means many users see an unstyled list with no interaction.

💡 Best Practices