This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Summary
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
This element includes the global attributes; in particular title
can be used to describe the command, or provide usage hints.
checked
- Boolean attribute which indicates whether the command is selected. May only be used when the
type
attribute ischeckbox
orradio
. 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
ortype
. default
- This Boolean attribute indicates use of the same command as the menu's subject element (such as a
button
orinput
). disabled
- Boolean attribute which indicates that the command is not available in the current state. Note that
disabled
is distinct fromhidden
; thedisabled
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 isradio
. 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.
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
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 |
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"
.