HTML - <menuitem>

The HTML <menuitem> element 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.

Example

 

HTML content

HTML
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" onclick="toggleOption()" checked="true">Checkbox</menuitem>
  <menuitem type="command" label="Command" icon="icon.png" onclick="doSomething()">Checkbox</menuitem>
  <menuitem type="radio" name="group1" onclick="option()" checked="true">Radio button 1</menuitem>
  <menuitem type="radio" name="group1" onclick="option()">Radio button 2</menuitem>
</menu>

CSS content

CSS
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

Result

Description  

The HTML <menuitem> element 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.

A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command 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 <input type="checkbox"> and <input type="radio">.)

Content categories None.
Permitted content None, it is an empty element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parent elements The <menu> element, where that element is in the popup menu state. (If specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.)
DOM interface HTMLMenuItemElement

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support (Yes)[1] 8 (8)[2] No support No support (Yes)[3] ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 8.0 (8) No support No support No support

[1] This is implemented behind the preference Experimental Web Platform features and only supports type="command".

[2] Only works for <menuitems> defined within a <menu> element assigned to an element via the contextmenu attribute. Furthermore, the element requires a closing tag.

[3] This is implemented behind the preference Enable experimental Web Platform features and only supports type="command".

See Also  

Specifications  

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<menuitem>' in that specification.
Living Standard  
HTML5.1
The definition of '<menuitem>' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/menuitem

Element Experimental HTML HTML interactive elements HTML5 Reference Web