<menu>

Summary

The HTML <menu> element represents a group of commands that a user can perform or activate. This includes both toolbar menus, which might appear across the top of a screen, as well as popup menus, such as those that might appear underneath a button after it has been clicked.

• Content categories Flow content. Additionally, if in the toolbar menu state, palpable content. (Toolbar menu is the default state, unless the parent element is a <menu> in the popup menu state.)
• Permitted content If the element is in the toolbar menu state: flow content, or alternatively, zero or more occurences of <li>, <script> and <template>.
  If the element is in the popup menu state: zero or more occurences, in any order, of <menu> (popup menu state only), <menuitem>, <hr>, <script>, and <template>.
• Tag omission None, both the starting and ending tag are mandatory.
• Permitted parent elements Any element that accepts flow content.
• DOM interface HTMLMenuElement

Attributes

This element includes the global 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 popup menu state.

type

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

• popup: The popup menu state, which represents a group of commands activated through another element. This might be through the menu attribute of a <button>, or an element with a contextmenu attribute. When nesting <menu> elements directly within one another, this is the missing value default if the parent is already in this state.
• toolbar: The toolbar menu state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a <menu> in the popup menu state.

Examples

Example 1

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="dropdown-menu">
  Dropdown
</button>

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

Example 2

<!-- A toolbar for a simple editor, containing two menu buttons. -->
<menu>
  <li>
    <button type="menu" value="File" menu="file-menu">
    <menu type="popup" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="edit-menu">
    <menu type="popup" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

Specifications

Browser compatibility

See also

• Other list-related HTML Elements: <ol>, <ul>, <li> and the obsolete <dir>.
• The contextmenu global attribute can be used on an element to refer to the id of a menu with the context type