Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <menu> Tag

Written by Published

Learn how the HTML <menu> tag represents a toolbar containing an unordered list of commands.

The <menu> tag represents a toolbar containing an unordered list of commands that a user can perform or activate.
Its items are normally written as <li> elements containing controls such as buttons.

Syntax

html

<menu>
  <li><button type="button">Save</button></li>
  <li><button type="button">Share</button></li>
</menu>

Attributes

AttributeDescription
classSpecifies one or more class names for CSS styling.
idDefines a unique identifier for the element.
styleAdds inline CSS styles.
titleProvides additional information as a tooltip when hovered.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Tag Example</title>
  <style>
    menu {
      display: flex;
      gap: 10px;
      list-style: none;
      padding: 0;
    }

    menu button {
      border: 0;
      border-radius: 6px;
      background-color: #29AB87;
      color: white;
      padding: 10px 16px;
      cursor: pointer;
    }

    menu button:hover {
      background-color: #218c70;
    }
  </style>
</head>
<body>
  <h1>Article Actions</h1>

  <menu>
    <li><button type="button">Save</button></li>
    <li><button type="button">Share</button></li>
    <li><button type="button">Print</button></li>
  </menu>
</body>
</html>

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

The <menu> element is supported by all major modern browsers.

Notes

  • Use <menu> for a toolbar or an unordered list of commands that users can activate.
  • Use <ul> for a general unordered list whose items are primarily displayed as content.
  • Place each command in an <li>, usually with an interactive control such as a <button>.
  • Browsers render <menu> similarly to <ul>; use CSS to create the toolbar layout.
  • The old context-menu use of <menu> is obsolete and should not be used.
  • The obsolete compact attribute should be replaced with CSS.
  • Both the opening and closing tags are required.

Conclusion

The <menu> tag provides a semantic way to group commands into a toolbar.
Use it with list items and interactive controls when users need to perform a related set of actions.

PreviousHTML <ul> TagsNextHTML <ol> Tag