mozilla

Revision 494805 of <menu>

  • Revision slug: Web/HTML/Element/menu
  • Revision title: <menu>
  • Revision id: 494805
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{outdated("This article differs from the latest specification which can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus")}}

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")}}

Attributes

This element includes 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")}}
{{HTMLRef}}

Revision Source

<p>{{outdated("This article differs from the latest specification which can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus")}}</p>
<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="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="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>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></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 <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu" title="HTML/Global attributes#attr-contextmenu"><code>contextmenu</code></a> <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>
 {{HTMLRef}}</div>
Revert to this revision