<menu>

  • Revision slug: HTML/Element/menu
  • Revision title: menu
  • Revision id: 292753
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML menu element (<menu>) represents an unordered list of menu choices, or commands.

There is no limitation to the depth and nesting of lists defined with the {{ HTMLElement("menu") }}, {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.

Usage note: The {{ HTMLElement("menu") }} and {{ HTMLElement("ul") }} both represent an unordered list of items. They differ in the way that the {{ HTMLElement("ul") }} element only contains items to display while the {{ HTMLElement("menu") }} element contains interactive items, to act on.
Note: This element was deprecated in HTML4, but reintroduced in HTML5.

Usage context

Content categories

flow content

If the element's type attribute is in the toolbar state: Interactive content.

Permitted content

Either: Zero or more {{ HTMLElement("li") }} elements.

Or: flow content.

Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accepts flow content
Normative document HTML5, section 4.11.4 (HTML4.01, section 10.4)

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("type") }}
Used to indicate the kind of menu being declared. The values defined under HTML5 are:
context
the commands of a context menu; the user can only interact with the commands if that context menu is activated
toolbar
a list of active commands that the user can immediately interact with
list
an unordered list of items (each represented by an {{ HTMLELement("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
{{ htmlattrdef("label") }}
Gives the label of the menu.

DOM interface

This element implements the HTMLMenuElement interface.

Examples

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="new()">New...</button>
      <button type="button" onclick="save()">Save...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="cut()">Cut...</button>
      <button type="button" onclick="copy()">Copy...</button>
      <button type="button" onclick="paste()">Paste...</button>
    </menu>
  </li>
</menu>

See also

  • Other list-related HTML Elements: {{ HTMLElement("ol") }}, {{ HTMLElement("ul") }}, {{ HTMLElement("li") }} and the obsolete {{ HTMLElement("dir") }}.
  • The contextmenu global attribute can be used on an element to refer to the id of a menu with the context {{ htmlattrxref("type","menu") }}
{{ HTML:Element_Navigation() }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML <em>menu</em> element (<code>&lt;menu&gt;</code>) represents an unordered list of menu choices, or commands.</p>
<p>There is no limitation to the depth and nesting of lists defined with the {{ HTMLElement("menu") }}, {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.</p>
<div class="note">
  <strong>Usage note: </strong> The {{ HTMLElement("menu") }} and {{ HTMLElement("ul") }} both represent an unordered list of items. They differ in the way that the {{ HTMLElement("ul") }} element only contains items to display while the {{ HTMLElement("menu") }} element contains interactive items, to act on.</div>
<div class="note">
  <strong>Note</strong>: This element was deprecated in HTML4, but reintroduced in HTML5.</div>



<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en-US/docs/HTML/Content_categories" title="en-US/docs/HTML/Content categories">Content categories</a></td>
      <td>
        <p><a href="/en-US/docs/HTML/Content_categories#flow_content" title="en-US/docs/HTML/Content categories#flow content">flow content</a></p>
        <p>If the element's <code>type</code> attribute is in the <code>toolbar</code> state: <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content">Interactive content</a>.</p>
      </td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td>
        <p>Either: Zero or more {{ HTMLElement("li") }} elements.</p>
        <p>Or: <a href="/en-US/docs/HTML/Content_categories#flow_content" title="en-US/docs/HTML/Content categories#flow content">flow content</a>.</p>
      </td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>none, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>any element that accepts flow content</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus">HTML5, section 4.11.4</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.4" title="http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.4">HTML4.01, section 10.4</a>)</td>
    </tr>
  </tbody>
</table>



<h2 id="Attributes">Attributes</h2>
<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/HTML/Global_attributes" title="en-US/docs/HTML/Global attributes">global attributes</a>.</p>
<dl>
  <dt>
    {{ htmlattrdef("type") }}</dt>
  <dd>
    Used to indicate the kind of menu being declared. The values defined under <a href="/en-US/docs/HTML/HTML5" title="en-US/docs/HTML/HTML5">HTML5</a> are:
    <dl>
      <dt>
        <code>context</code></dt>
      <dd>
        the commands of a context menu; the user can only interact with the commands if that context menu is activated</dd>
      <dt>
        <code>toolbar</code></dt>
      <dd>
        a list of active commands that the user can immediately interact with</dd>
      <dt>
        <code>list</code></dt>
      <dd>
        an unordered list of items (each represented by an {{ HTMLELement("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</dd>
    </dl>
  </dd>
  <dt>
    {{ htmlattrdef("label") }}</dt>
  <dd>
    Gives the label of the menu.</dd>
</dl>



<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <a href="/en-US/docs/DOM/HTMLMenuElement" title="en-US/docs/DOM/HTMLMenuElement">HTMLMenuElement</a> interface.</p>



<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;menu type="toolbar"&gt;
  &lt;li&gt;
    &lt;menu label="File"&gt;
      &lt;button type="button" onclick="new()"&gt;New...&lt;/button&gt;
      &lt;button type="button" onclick="save()"&gt;Save...&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;menu label="Edit"&gt;
      &lt;button type="button" onclick="cut()"&gt;Cut...&lt;/button&gt;
      &lt;button type="button" onclick="copy()"&gt;Copy...&lt;/button&gt;
      &lt;button type="button" onclick="paste()"&gt;Paste...&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
&lt;/menu&gt;</pre>




<h2 id="See_also">See also</h2>
<ul>
  <li>Other list-related HTML Elements: {{ HTMLElement("ol") }}, {{ HTMLElement("ul") }}, {{ HTMLElement("li") }} and the obsolete {{ HTMLElement("dir") }}.</li>
  <li>The <code><a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu" title="en-US/docs/HTML/Global attributes#attr-contextmenu">contextmenu</a></code> <a href="/en-US/docs/HTML/Global_attributes" title="en-US/docs/HTML/Global attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with the <code>context</code> {{ htmlattrxref("type","menu") }}</li>
</ul>



<div>{{ HTML:Element_Navigation() }}</div>
Revert to this revision