W3cubDocs

/HTML

<menuitem>

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <menuitem> 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 parents	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.)
Permitted ARIA roles	None
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 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.

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" checked>Checkbox</menuitem>
  <hr>
  <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr>
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>

CSS content

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

Result

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`checked`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`command`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`default`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`disabled`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	Yes Disabled Yes Disabled Disabled This feature is behind the `Enable Experimental Web Platform Features` preference (needs to be set to `true`).	No
`icon`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`radiogroup`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`type`	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`checked`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`command`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`default`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`disabled`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`icon`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`radiogroup`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No
`type`	No	No	Yes	8 8 Only works for `<menuitem>` elements defined within a `<menu>` element assigned to an element via the `contextmenu` attribute. The `<menuitem>` element requires a closing tag.	No	No	No