mozilla

Revision 336215 of <menu>

  • Revision slug: HTML/Element/menu
  • Revision title: <menu>
  • Revision id: 336215
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <menu> element 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.
  • Content categories Flow content.
    If the element's {{htmlattrxref("type", "menu")}} attribute is in the toolbar state: Interactive content, palpable content.
    If the element's {{htmlattrxref("type", "menu")}} attribute is in the list state: Interactive content.
  • Permitted contentEither: Zero or more {{HTMLElement("li")}} elements.
    Or: flow content
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements Any element that accepts flow content.
  • DOM interface {{domxref("HTMLMenuElement")}}
Content categories

flow content

 

Permitted 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.

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>

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '<menu>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-menu-element.html#the-menu-element', '<menu>')}} {{Spec2('HTML5 W3C')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

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 <strong>HTML <code>&lt;menu&gt;</code> element</strong> 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>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.<br />
    If the element's {{htmlattrxref("type", "menu")}} 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>, palpable content.<br />
    If the element's {{htmlattrxref("type", "menu")}} attribute is in the <code>list</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>.</li>
  <li><dfn>Permitted content</dfn>Either: Zero or more {{HTMLElement("li")}} elements.<br />
    Or: <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a></li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLMenuElement")}}</li>
</ul>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
      <td>
        <p><a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a></p>
        <p>&nbsp;</p>
      </td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td><br />
        <p>.</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="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="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="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="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '&lt;menu&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-menu-element.html#the-menu-element', '&lt;menu&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<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="HTML/Global attributes#attr-contextmenu">contextmenu</a></code> <a href="/en-US/docs/HTML/Global_attributes" title="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