<menu>

The <menu> element represents a list of commands.

HTML Attributes

• type = context/ toolbar/ list
  Indicates the kind of menu being declared:
  • context
    the commands of a context menu, and the user can only interact with the commands if that context menu is activated. [Example B]
  • toolbar
    A list of active commands that the user can immediately interact with. [Example A]
  • list
    an unordered list of items (each represented by an li element), each of which represents a command that the user can perform or activate, or, if the element has no li element children, flow content describing available commands.

• label = string
  Gives the label of the menu.

See also global attributes.

Examples

Example A

For example, the following represents a toolbar with three menu buttons on it, each of which has a dropdown menu with a series of options [try it]:

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="fnew()">New...</button>
      <button type="button" onclick="fopen()">Open...</button>
      <button type="button" onclick="fsave()">Save</button>
      <button type="button" onclick="fsaveas()">Save as...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="ecopy()">Copy</button>
      <button type="button" onclick="ecut()">Cut</button>
      <button type="button" onclick="epaste()">Paste</button>
    </menu>
  </li>
  <li>
    <menu label="Help">
      <li><a href="help.html">Help</a></li>
      <li><a href="about.html">About</a></li>
    </menu>
  </li>
</menu>

Example B

Here is an example of a context menu for an input control [try it]:

<form name="npc">
  <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
   <menu type=context id=namemenu>
     <command label="Pick random name"
        onclick="document.forms.npc.elements.char.value = getRandomName()">
     <command label="Prefill other fields based on name"
        onclick="prefillFields(document.forms.npc.elements.char.value)">
   </menu>
</form>

HTML Reference

The HTML5 specification defines the <menu> element in 4.12.4 The menu element.