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

<!-- 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

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`

Attributes

Includes the Global Attributes.

Name	Version	Description
`checked`		Boolean attribute which indicates whether the command is selected. May only be used when the `type` attribute is `checkbox` or `radio`.
`command`		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 `checked`, `disabled`, `icon`, `label`, `radiogroup` or `type`.
`default`		This Boolean attribute indicates use of the same command as the menu's subject element (such as a `button` or `input`).
`disabled`		Boolean attribute which indicates that the command is not available in the current state. Note that `disabled` is distinct from `hidden`; the `disabled` attribute is appropriate in any context where a change in circumstances might render the command relevant.
`icon`		Image URL, used to provide a picture to represent the command.
`label`		The name of the command as shown to the user. Required when a `command` attribute is not present.
`radiogroup`		This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the `type` attribute is `radio`.
`type`		This attribute indicates the kind of command, and can be one of three values. `command`: A regular command with an associated action. This is the missing value default. `checkbox`: Represents a command that can be toggled between two different states. `radio`: Represent one selection from a group of commands that can be toggled as radio buttons.

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

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