HTML <menu> Element

Publish in HTML Tutorial el 24/05/2025 17:24

The <menu> element represents a group of commands that a user can perform or activate. While similar to unordered lists (<ul>), the <menu> element is semantically intended for interactive items and can be used for context menus, toolbar commands, and other lists of user actions.

Key features of the <menu> element:

Semantically represents a menu of commands
Can be used for context menus (with JavaScript)
Works well with keyboard navigation
Supports different types of menu items

Basic Syntax

Here's the basic structure of a <menu> element:

Examples

1. Basic Menu with Buttons

A simple menu containing action buttons with Bootstrap styling:

Play Code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<menu class="list-unstyled p-3 border rounded">
  <li class="mb-2"><button class="btn btn-primary w-100">New Document</button></li>
  <li class="mb-2"><button class="btn btn-secondary w-100">Open File</button></li>
  <li><button class="btn btn-danger w-100">Delete</button></li>
</menu>

2. Context Menu (JavaScript Example)

A right-click context menu that appears at the cursor position:

Play Code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<div id="context-area" style="height: 200px; border: 2px dashed #ccc;" 
     class="d-flex align-items-center justify-content-center">
  Right-click here
</div>

<menu id="context-menu" class="shadow" style="display: none; position: absolute;">
  <li><button class="dropdown-item">Copy</button></li>
  <li><button class="dropdown-item">Paste</button></li>
  <li><hr class="dropdown-divider"></li>
  <li><button class="dropdown-item">Inspect</button></li>
</menu>

<script>
  const area = document.getElementById('context-area');
  const menu = document.getElementById('context-menu');
  
  area.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.style.display = 'block';
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
  });
  
  document.addEventListener('click', () => {
    menu.style.display = 'none';
  });
</script>

3. Toolbar Menu

A horizontal menu styled as a toolbar with Bootstrap:

Play Code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<menu class="d-flex list-unstyled bg-light p-2 rounded gap-2">
  <li><button class="btn btn-sm btn-outline-primary"><i class="bi bi-bold"></i></button></li>
  <li><button class="btn btn-sm btn-outline-primary"><i class="bi bi-italic"></i></button></li>
  <li><button class="btn btn-sm btn-outline-primary"><i class="bi bi-underline"></i></button></li>
  <li class="dropdown-divider"></li>
  <li><button class="btn btn-sm btn-outline-success"><i class="bi bi-list-ul"></i></button></li>
  <li><button class="btn btn-sm btn-outline-success"><i class="bi bi-list-ol"></i></button></li>
</menu>

4. Nested Dropdown Menu (JavaScript Example)

A menu with nested submenus that appear on hover:

Play Code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<menu class="list-unstyled p-0 m-0">
  <li class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" 
            data-bs-toggle="dropdown">
      File
    </button>
    <menu class="dropdown-menu">
      <li><button class="dropdown-item">New</button></li>
      <li><button class="dropdown-item">Open</button></li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-submenu">
        <button class="dropdown-item dropdown-toggle">Export</button>
        <menu class="dropdown-menu">
          <li><button class="dropdown-item">PDF</button></li>
          <li><button class="dropdown-item">PNG</button></li>
          <li><button class="dropdown-item">JPG</button></li>
        </menu>
      </li>
    </menu>
  </li>
</menu>

<style>
  .dropdown-submenu:hover .dropdown-menu {
    display: block;
    left: 100%;
    top: 0;
  }
</style>

5. Accessibility-Friendly Menu

A menu with proper ARIA attributes for screen readers:

Play Code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<menu aria-label="User actions" class="list-unstyled">
  <li>
    <button aria-haspopup="true" aria-expanded="false" 
            class="btn btn-link text-decoration-none">
      <i class="bi bi-person"></i> Profile
    </button>
  </li>
  <li>
    <button class="btn btn-link text-decoration-none">
      <i class="bi bi-gear"></i> Settings
    </button>
  </li>
  <li>
    <button class="btn btn-link text-decoration-none text-danger">
      <i class="bi bi-box-arrow-right"></i> Logout
    </button>
  </li>
</menu>

Tips and Tricks

Semantic Use: Reserve <menu> for interactive command lists, not for general navigation.
Keyboard Navigation: Ensure your menu can be navigated using Tab and arrow keys.
Mobile Friendly: Consider using <select> for mobile devices when space is limited.
ARIA Attributes: Use aria-haspopup and aria-expanded for dropdown menus.
Performance: For large menus, consider virtual scrolling techniques.

Browser Compatibility

The <menu> element is widely supported in modern browsers, but some older browsers may require polyfills for advanced features. Always test your implementation across different browsers.