Revision 1073192 of <menuitem>

<p>{{ SeeCompatTable() }}</p>

<h2 id="Summary">Summary</h2>

<p>The <strong>HTML <code>&lt;menuitem&gt;</code> element</strong> represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.</p>

<p>A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an <em>indirect command</em> whose behavior is defined by a separate element. Commands can also optionally include a checkbox or be grouped to share radio buttons. (Menu items for indirect commands gain checkboxes or radio buttons when defined against elements <code>&lt;input type="checkbox"&gt;</code> and <code>&lt;input type="radio"&gt;</code>.)</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td>None.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>None, it is an {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>Must have a start tag and must not have an end tag.</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>The {{ HTMLElement("menu") }} element, where that element is in the <em>popup menu</em> state. (If specified, the <code>type</code> attribute of the {{ HTMLElement("menu") }} element must be <code>popup</code>; if missing, the parent element of the {{ HTMLElement("menu") }} must itself be a {{ HTMLElement("menu") }} in the <em>popup menu</em> state.)</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLMenuItemElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>; in particular <code>title</code> can be used to describe the command, or provide usage hints.</p>

<dl>
 <dt>{{htmlattrdef("checked")}}</dt>
 <dd>Boolean attribute which indicates whether the command is selected. May only be used when the <code>type</code> attribute is <code>checkbox</code> or <code>radio</code>.</dd>
 <dt>{{htmlattrdef("command")}}</dt>
 <dd>Specifies the ID of a separate element, indicating a command to be invoked indirectly. May not be used within a menu item that also includes the attributes <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> or <code>type</code>.</dd>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>This Boolean attribute indicates use of the same command as the menu's subject element (such as a <code>button</code> or <code>input</code>).</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Boolean attribute which indicates that the command is not available in the current state. Note that <code>disabled</code> is distinct from <code>hidden</code>; the <code>disabled</code> attribute is appropriate in any context where a change in circumstances might render the command relevant.</dd>
 <dt>{{htmlattrdef("icon")}}</dt>
 <dd>Image URL, used to provide a picture to represent the command.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>The name of the command as shown to the user. Required when a <code>command</code> attribute is not present.</dd>
 <dt>{{htmlattrdef("radiogroup")}}</dt>
 <dd>This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the <code>type</code> attribute is <code>radio</code>.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>This attribute indicates the kind of command, and can be one of three values.
 <ul>
  <li><code>command</code>: A regular command with an associated action. This is the missing value default.</li>
  <li><code>checkbox</code>: Represents a command that can be toggled between two different states.</li>
  <li><code>radio</code>: Represent one selection from a group of commands that can be toggled as radio buttons.</li>
 </ul>
 </dd>
</dl>

<h2 id="Example">Example</h2>

<h3 id="HTML_content">HTML content</h3>

<pre class="brush: html">
&lt;!-- A &lt;div&gt; element with a context menu --&gt;
&lt;div contextmenu="popup-menu"&gt;
  Right-click to see the adjusted context menu
&lt;/div&gt;

&lt;menu type="context" id="popup-menu"&gt;
  &lt;menuitem type="checkbox" label="Checkbox" onclick="toggleOption()" checked="true"&gt;
  &lt;menuitem type="command" label="Command" icon="icon.png" onclick="doSomething()"&gt;
  &lt;menuitem type="radio" label="Radio button 1" onclick="save()"&gt;
  &lt;menuitem type="radio" label="Radio button 2" onclick="save()"&gt;
&lt;/menu&gt;
</pre>

<h3 id="CSS_content">CSS content</h3>

<pre class="brush: css">
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Example', '300', '80')}}</p>

<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', 'forms.html#the-menuitem-element', '&lt;menuitem&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-menuitem-element', '&lt;menuitem&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</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>{{CompatGeckoDesktop(8)}}</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>{{CompatGeckoMobile(8)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">HTML5 context menus in Firefox (Screencast and Code)</a></li>
</ul>

<p>{{ HTMLRef }}</p>