<menu> - Menu list

The <menu> tag in HTML is used to define a list of menu items, typically combined with <li> to represent a set of interactive options for users. It can be used for context menus or as a container for toolbars or command lists. Below is a detailed breakdown and practical examples of <menu>.

Basic Syntax of <menu>

The syntax of the <menu> tag is simple, usually containing multiple <li> child elements. The basic structure is as follows:

<menu>
  <li><button>Option 1</button></li>
  <li><button>Option 2</button></li>
</menu>

By default, <menu> renders as an unordered list, but its behavior can be modified using the type attribute. For example, type="context" indicates a context menu, which requires JavaScript to implement functionality.

Attributes of <menu>

type Attribute

• type="toolbar": Renders the menu as a toolbar with horizontally arranged options.
• type="context": Defines a context menu, which must be bound to other elements using the contextmenu attribute.

<!-- Toolbar Example -->
<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
</menu>

<!-- Context Menu Example -->
<div contextmenu="file-menu">Right-click here</div>
<menu type="context" id="file-menu">
  <li><button>Open</button></li>
  <li><button>Delete</button></li>
</menu>

label Attribute

Provides a descriptive label for the menu, which is read by assistive technologies like screen readers.

<menu label="File Actions">
  <li><button>New</button></li>
</menu>

Practical Use Cases

1. Context Menu

Triggering a custom right-click menu with JavaScript:

<div id="target">Right-click here</div>
<menu type="context" id="ctx-menu">
  <li><button onclick="alert('Refreshed')">Refresh</button></li>
</menu>

<script>
  document.getElementById("target").addEventListener("contextmenu", (e) => {
    e.preventDefault();
    const menu = document.getElementById("ctx-menu");
    menu.style.display = "block";
    menu.style.position = "absolute";
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
  });
</script>

2. Toolbar Menu

Simulating an editor toolbar:

<menu type="toolbar">
  <li><button onclick="formatText('bold')">Bold</button></li>
  <li><button onclick="formatText('italic')">Italic</button></li>
</menu>

<script>
  function formatText(type) {
    console.log(`Applied format: ${type}`);
  }
</script>

Comparison with <ul>

Although both <menu> and <ul> can render lists, their semantics differ:

• <ul> represents a generic list of items.
• <menu> emphasizes interactivity and is suitable for collections of actions.

<!-- Scenario suitable for <ul> -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- Scenario suitable for <menu> -->
<menu>
  <li><button>Save</button></li>
  <li><button>Undo</button></li>
</menu>

Compatibility and Considerations

• Modern browsers generally support <menu>, but older versions may require a polyfill.
• Context menus require manual implementation for hiding logic (e.g., closing the menu when clicking outside).
• Avoid nesting multiple levels of <menu>, as it may increase interaction complexity.

<!-- Dynamic Menu Example -->
<menu id="dynamic-menu"></menu>

<script>
  const items = ["Login", "Register", "Logout"];
  const menu = document.getElementById("dynamic-menu");
  items.forEach(item => {
    const li = document.createElement("li");
    li.innerHTML = `<button>${item}</button>`;
    menu.appendChild(li);
  });
</script>

Accessibility Recommendations

• Add aria-* attributes to buttons:

  <menu>
    <li><button aria-label="Close current tab">Close</button></li>
  </menu>
  

• Ensure menu items can be focused using the Tab key for keyboard navigation.