HTML5 <menu> Tag

The HTML <menu> tag is used to represent a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.

The only content permitted inside this element is an element in the list menu state i.e., flow content, or alternatively, zero or more occurrences of <li>. If the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem> and <hr>.

The parent of the <menu> tag can be any element that accepts flow content. The element menu with the attribute type whose value is "toolbar" must not appear as a descendant of the <a> or <button> tag.

The following style is applied to this element by default:

menu {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}

Here is an example of using this tag:

<!-- Context Menu (Currently Supported in Firefox)-->
<div contextmenu="popup-menu">
  <p>Right clicking on this text will show you the adjusted context menu.</p>
</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr>
  <menuitem>Separated action</menuitem>
</menu>


<!-- Menu Button -->
<button type="menu" menu="popup-menu">
  Dropdown
</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr>
  <menuitem>Separated action</menuitem>
</menu>


<!-- Toolbar Menu -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

The context menu is only supported in Firefox. The toolbar menu and menu button is not supported in any browser at present.

Attributes

label

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a <menu> in the context menu state.

type

This attribute indicates the kind of menu being declared, and can be one of two values:

  • context: Indicates the popup menu state, which represents a group of commands activated through another element. This might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu attribute. This value is the default if the attribute is missing and the parent element is also a <menu> element.
  • toolbar: Indicates the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands. This value is the default if the attribute is missing.

Examples

See the Pen HTML menu Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <menu> element on MDN.
  2. You can also read the HTML <menu> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top