HTML <menu> Tag

The <menu> tag in HTML is used to define a list of commands, often presented as a context menu, toolbar, or any other type of menu. It's a container for menu items, providing a structured way to group commands that a user can interact with. Unlike simple lists, the <menu> tag is designed for interactive elements.

Syntax

<menu type="context|toolbar|list" label="Menu Label">
  <menuitem type="command|checkbox|radio" label="Item Label" icon="url" onclick="handler"></menuitem>
  <li><a href="url">Item as a link</a></li>
  <li>Item as simple list</li>
</menu>

Attributes

Example

Here’s a basic example of using the <menu> tag as a context menu triggered by a button:

<p>Right-click on the button to see the menu:</p>

<button id="myButton"  oncontextmenu="showMenu(event)">Right-click Me</button>

<menu type="context" id="myContextMenu">
  <menuitem label="Copy" onclick="copyText()">Copy</menuitem>
  <menuitem label="Paste" onclick="pasteText()">Paste</menuitem>
  <menuitem label="Delete" onclick="deleteText()">Delete</menuitem>
</menu>

<script>
function showMenu(event) {
  event.preventDefault(); // Prevent the default browser context menu
  const contextMenu = document.getElementById('myContextMenu');
  contextMenu.style.display = 'block';
  contextMenu.style.position = 'absolute';
  contextMenu.style.left = event.clientX + 'px';
  contextMenu.style.top = event.clientY + 'px';

  document.addEventListener('click', function hideMenu() {
    contextMenu.style.display = 'none';
    document.removeEventListener('click', hideMenu);
  });
}

function copyText() {
  alert('Copy action triggered');
}

function pasteText() {
  alert('Paste action triggered');
}

function deleteText() {
  alert('Delete action triggered');
}
</script>

More Examples

Toolbar Menu

The <menu> tag can also be used to create toolbars. Below is a basic example with a toolbar type menu:

<menu type="toolbar" label="Formatting Tools">
    <menuitem label="Bold" icon="bold.png" onclick="format('bold')"></menuitem>
    <menuitem label="Italic" icon="italic.png" onclick="format('italic')"></menuitem>
    <menuitem label="Underline" icon="underline.png" onclick="format('underline')"></menuitem>
</menu>

<script>
    function format(type){
        alert("Format action: "+ type + " triggered");
    }
</script>

List Menu

<menu> can be used as an alternative to <ul> or <ol> with a semantic meaning of menu items:

<menu type="list" label="Navigation Menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</menu>

Browser Support

The <menu> tag has inconsistent browser support, especially regarding the type attribute and its behavior.

Note: The <menu> tag's type="context" behavior and styling are often browser-specific and may require additional JavaScript and CSS to achieve consistent results. For complex menus, consider using more robust JavaScript-based solutions like libraries or frameworks.

Notes and Tips

• Context Menus: The <menu> tag is often used in conjunction with JavaScript to display custom context menus when a user right-clicks an element.
• menuitem: You will often see <menuitem> elements inside a <menu> element. They are a good way to include commands that have icons and onclick handlers.
• Accessibility: Ensure menus are accessible by providing clear labels, keyboard navigation, and ARIA attributes when needed.
• Styling: Menus may need custom CSS styling to look and function correctly across different browsers.
• Fallback: Provide fallback options for older browsers that do not fully support the <menu> tag. For instance you can style unordered lists to look like menus for better support across the browsers.
• Modern Alternatives: Due to the limitations of built-in menu functionalities, many developers prefer to use JavaScript libraries or frameworks to create dynamic and interactive menus.
• Avoid Misuse: Avoid misusing the tag. It is not designed to be used as a general purpose list container. Use it when you have a clear intention of using menu items and related semantic context.