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