menu element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The menu element represents a list of commands. This element has been designed to allow authors to easily create menus in a document or application, without having to resort to client-side scripting. The commands or items in a menu can be inserted using the elements menuitem or li, depending on the type of menu they're being declared in.

The behavior of a menu depends on the value of the type attribute. This attribute can take one of two values, which are (case-insensitive):

  • context: the menu is to be shown upon user interaction, like with a button or through a request for the context menu. This value is default when the menu is child of another menu with the value "context" in the type attribute.
  • toolbar: the menu represents a toolbar that may have an unordered list of commands (li) the user can activate. In such case, the elements in the menu are represented by the button element (responsible for showing the associated submenu when clicked), as depicted by the last example in this page. Alternatively, the content of the menu may lack li elements and be composed of flow content providing a description about the commands available.

The label attribute can be declared only in a menu that is child of another context menu. In such situations, the value in this attribute will be used by browsers to label the sub-menu in the parent menu.

The items in a menu can be thematically separated in groups, by inserting breaks represented by the hr element.

As of 2015/03/27, browser support for the menu element is almost inexistent. Authors may have to rely on scripts to achieve the same effect cross-browser, until support grows.

Examples

In our first example, we'll create a context menu for a paragraph (p). This menu will be shown in supporting browsers when the user right-clicks over the paragraph.

Each one of the options in the menu is represented by a menuitem element. The actions executed by these options will be performed by a client-side script called in the onclick attribute.

<p id="paragraph1" contextmenu="contextmenu1">A custom context menu should be displayed in supporting browsers, when the user right-clicks this paragraph, allowing the selection of the background color.</p>
<menu id="contextmenu1" type="context">
  <menuitem label="Red background" onclick="menuChangeColorTo(1, 'red')">
  <menuitem label="Green background" onclick="menuChangeColorTo(1, 'green')">
  <menuitem label="Blue background" onclick="menuChangeColorTo(1, 'blue')">
</menu>

A custom context menu should be displayed in supporting browsers, when the user right-clicks this paragraph, allowing the selection of the background color.

Now we'll create a nested context menu. In this example, the menu of the previous example will be expanded to present a sub-menu with a couple of options. The type attribute can be safely omitted in the inner menu because "context" is the default value for a menu that's child of another context menu.

In this case, the label attribute plays a major role by providing the parent menu some text to display in the option that deploys the submenu when activted.

<p id="paragraph2" contextmenu="contextmenu2">Albert Einstein was a German-born theoretical physicist. He developed the general theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).</p>
<menu id="contextmenu2" type="context">
  <menuitem label="Red background" onclick="changeColorTo(2, 'red')">
  <menuitem label="Green background" onclick="changeColorTo(2, 'green')">
  <menuitem label="Blue background" onclick="changeColorTo(2, 'blue')">
  <menu label="Monocromatic bacgrounds">
    <menuitem label="White background" onclick="changeColorTo(2, 'white')">
    <menuitem label="Black background" onclick="changeColorTo(2, 'black')">
  </menu>
</menu>

Albert Einstein was a German-born theoretical physicist. He developed the general theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).

In the following example we're using the hr element to thematically separate the options in the menu. Additionally we're tweaking some attributes in the menuitem elements to provide options that behave like checkboxes and radio buttons.

The functions declared in the following example aren't meant to work. This example aims only to test the functionality provided by browsers for menus.

<p contextmenu="contextmenu3">Stephen William Hawking is an English theoretical physicist, cosmologist, author and director of research at the Centre for Theoretical Cosmology within the University of Cambridge.</p>
<menu id="contextmenu3" type="context">
  <menuitem label="Auto-correction" type="checkbox" onclick="switchAutocorrection()">
  <hr>
  <menuitem label="English" type="radio" radiogroup="radiolang" onclick="changeLanguageTo('english')">
  <menuitem label="Spanish" type="radio" radiogroup="radiolang" onclick="changeLanguageTo('spanish')">
  <menuitem label="French" type="radio" radiogroup="radiolang" onclick="changeLanguageTo('french')">
</menu>

Stephen William Hawking is an English theoretical physicist, cosmologist, author and director of research at the Centre for Theoretical Cosmology within the University of Cambridge.


In the next example, we'll insert a toolbar menu that's pretending to be the menu bar in a text editor. The commands listed in this menu will lead to no action, but the example will still be sufficient to depict the functionality of the menu element.

In this example, we'll also be using the button element with its attribute type set to "menu" and its attribute menu set to match the id of the menu it's related to. These buttons will represent each submenu that will be open when they're pressed.

<menu>
  <li>
    <button type="menu" value="File" menu="filemenu">
    <menu id="filemenu" type="context">
      <menuitem label="New..." onclick="new()">
      <menuitem label="Open..." onclick="open()">
      <menuitem label="Save" onclick="save()">
      <menuitem label="Save as..." onclick="saveas()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="editmenu">
    <menu id="editmenu" type="context">
      <menuitem label="Copy" onclick="copy()">
      <menuitem label="Cut" onclick="cut()">
      <menuitem label="Paste" onclick="paste()">
    </menu>
  </li>
</menu>
  • You may have noted that the type attribute has been omitted in the outermost menu. This is because "toolbar" is the default value when the menu isn't child of another context menu.

    Attributes

    Specific attributes

    type

    One of two predefined values determining the behavior and/or purpose of the menu. The two possible (case-insensitive) values are:

    • context: the menu is to be shown upon user interaction, like with a button or through a request for the context menu. This value is default when the menu is child of another menu with the value "context" in the type attribute.
    • toolbar: the menu represents a toolbar that may have an unordered list of commands (li) the user can activate. In such case, the elements in the menu are represented by the button element (responsible for showing the associated submenu when clicked). Alternatively, the content of the menu may lack li elements and be composed of flow content providing a description about the commands available.

    Example

    <menu id="editcontextmenu" type="context">
      <menuitem label="Cut" onclick="cut()">
      <menuitem label="Copy" onclick="copy()">
      <menuitem label="Paste" onclick="paste()">
    </menu>
    

    label

    A run of text to be displayed by the parent menu as the label of this sub-menu. A common behavior would be to display the contents of this menu when its label, present on the parent menu, is activated.

    This attribute must only be declared in a menu that is child of another menu which has the "context" value in its type attribute.

    The functions in the following example ("cut", "copy", "paste", etc) aren't meant to work. This example aims only to test the functionality provided by browsers for nested menus.

    Example

    <p contextmenu="contextmenu4">Paranormal events are phenomena described in popular culture, folklore and other non-scientific bodies of knowledge, whose existence within these contexts is described to lie beyond normal experience or scientific explanation.</p>
    <menu id="contextmenu4" type="context">
      <menuitem label="Cut" onclick="cut()">
      <menuitem label="Copy" onclick="copy()">
      <menuitem label="Paste" onclick="paste()">
      <menu label="Select">
        <menuitem label="Word" onclick="select('word')">
        <menuitem label="Sentence" onclick="select('sentence')">
        <menuitem label="Paragraph" onclick="select('paragraph')">
        <menuitem label="All" onclick="select('all')">
      </menu>
    </menu>
    

    Paranormal events are phenomena described in popular culture, folklore and other non-scientific bodies of knowledge, whose existence within these contexts is described to lie beyond normal experience or scientific explanation.

    Global attributes

    For information about global attributes refer to this list of global attributes in HTML5.

    Events

    Global events

    For information about global events refer to this list of global events in HTML5.