1. html
  2. /tags
  3. /menu

<menu>

Definition

The HTML <menu> element represents a list of commands or options that a user can choose from to perform an action or navigate to a different part of a website or application. It is typically used for presenting a menu of options that the user can interact with, such as a dropdown menu, context menu, or toolbar.

The <menu> element can contain one or more <li> (list item) elements that represent the individual options or commands. Each <li> element can contain nested <menu> elements to create submenus or hierarchical menus. The options within a <menu> element can be activated through various means, such as keyboard shortcuts, mouse clicks, or touch gestures.

Examples

Here's an example of how to use the HTML <menu> element:

<body>
  <menu>
    <li><a href="#">File</a>
      <menu>
        <li><a href="#">New</a></li>
        <li><a href="#">Open</a></li>
        <li><a href="#">Save</a></li>
      </menu>
    </li>
    <li><a href="#">Edit</a>
      <menu>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Paste</a></li>
      </menu>
    </li>
    <li><a href="#">View</a>
      <menu>
        <li><a href="#">Zoom In</a></li>
        <li><a href="#">Zoom Out</a></li>
      </menu>
    </li>
  </menu>
</body>

In this example, we have a simple menu with three options: File, Edit, and View. Each option has its own submenu with additional options or commands. The <menu> element contains a list of <li> elements, which in turn contain the <a> element used for the individual options or commands.

Attributes

This element only includes the global attributes.

Best Practices

  • Use the <menu> element only for its intended purpose of representing a list of commands or options. Do not use it as a general-purpose list container.
  • Use semantic HTML to make the menu accessible to all users. Use proper nesting and labeling of menu items to ensure that screen readers and other assistive technologies can interpret the menu structure correctly.
  • Provide keyboard support for the menu. Ensure that users can navigate and activate menu items using only the keyboard.
  • Use appropriate styling to make the menu easy to read and interact with. Use color, font, and spacing to make the menu items stand out, and ensure that hover and active states are clearly indicated.
  • Use progressive enhancement to ensure that the menu is usable even in the absence of JavaScript or CSS. Avoid relying on JavaScript or CSS to make the menu functional.
  • Keep the menu concise and organized. Limit the number of items in the menu, and use submenus or hierarchical menus to organize items if necessary.
  • Test the menu on different devices and screen sizes to ensure that it works well on all platforms.

Accessibility Considerations

  • Use proper nesting and labeling of menu items to ensure that screen readers and other assistive technologies can interpret the menu structure correctly. Provide descriptive labels that accurately describe the purpose of each menu item.
  • Use ARIA attributes to provide additional information about the menu structure, such as role="menu" and aria-labelledby.
  • Ensure that the menu can be navigated and activated using the keyboard alone. Use appropriate keyboard shortcuts and provide visual focus indicators to make it clear which menu item is currently selected.
  • Ensure that the menu is operable by users with various disabilities. For example, users with motor disabilities may have difficulty with precise mouse movements, so the menu should be easy to use with a keyboard or other input device.
  • Provide clear and concise instructions on how to use the menu, and ensure that they are easy to find and understand.
  • Test the menu with various assistive technologies to ensure that it is accessible to all users, including those with visual impairments, cognitive disabilities, and motor disabilities.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes