HTML <menuitem> Element

The HTML <menuitem> tag is used for specifying a command that the user can invoke from a popup menu.

You can use one or more type, label, icon, disabled, checked, and radiogroup attributes to set a new command. Otherwise you can use the command attribute to reference another command.

The <menuitem> tag was introduced in HTML 5.

Example

When the user right click's on the image, a context menu appears with various options specific to this image. In this case we've added an option to change the color of the border. We have also added links to further information about the photo topic.

Note that at the time of writing, this feature was only supported in Firefox.

Also note that, although the <menuitem> element is an empty element and should not have a closing tag, this example currently only works by using a closing tag.

Example

The following example shows how this element works.

Code

Result

Attributes

The <menuitem> element accepts the following attributes.

Local Attributes

The following attributes are defined in the <menuitem> element's specification.

AttributeDescription
typeSpecifies the type of command.

Possible values:

  • command (default value). This value means that element represents a normal command with an associated action.
  • checkbox The element represents a state or option that can be toggled.
  • radio Means that the element represents a selection of one item from a list of items.
labelSpecifies the name of the command, as shown to the user.
iconSpecifies the URI (or IRI) of graphical image that represents the action.
disabledSpecifies if the command is disabled or not.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled="disabled").

Possible values:

  • [Empty string]
  • disabled
checkedIndicates whether the command is selected or not. This attribute can only be used when the type attribute is either checkbox or radio.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either checked or checked="checked").

Possible values:

  • [Empty string]
  • checked
radiogroupSpecifies the name of the group of commands that will be toggled when the command itself is toggled, for commands whose type attribute has the value "radio".

defaultSpecifies that the command is the one that would have been invoked if the user had directly activated the menu's subject instead of using the menu.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either default or default="default").

Possible values:

  • [Empty string]
  • default
commandHere's what the W3C HTML5 specification says about the command attribute:

If the element's Disabled State is false (enabled) then the element's activation behavior depends on the element's type and command attributes, as follows:

If the element has a master command set by its command attribute
The user agent must run synthetic click activation steps on the element's master command.

If the type attribute is in the Checkbox state
If the element has a checked attribute, the UA must remove that attribute. Otherwise, the UA must add a checked attribute, with the literal value checked.

If the type attribute is in the Radio state
If the element has a parent, then the UA must walk the list of child nodes of that parent element, and for each node that is a menuitem element, if that element has a radiogroup attribute whose value exactly matches the current element's (treating missing radiogroup attributes as if they were the empty string), and has a checked attribute, must remove that attribute.

Then, the element's checked attribute must be set to the literal value checked.

Otherwise
The element's activation behavior is to do nothing.

Global Attributes

The <menuitem> element accepts the following global attributes. These attributes are standard across all HTML 5 elements.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this <menuitem> element.

Possible values.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.

Possible values:

  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.

Possible values:

ValueDescription
ltrSpecifies that the text should read left to right.
rtlThe text should read right to left.
autoThe text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this <menuitem> element or not.

Possible values:

  • true
  • false
  • auto
ValueDescription
trueThis value specifies that the element is draggable.
falseA false value specifies that the element is not draggable.
autoUses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <menuitem> element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Possible values:

ValueDescription
copyResults in a copy of the dragged data. Default value.
moveResults in the data being moved to the new location.
linkResults in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string "string:"Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string "file:"Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone="copy file:image/png file:image/gif file:image/jpeg"

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden

Indicates that this particular <menuitem> element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either hidden or hidden="hidden").

Possible values:

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary's specification.

itemprop This attribute provides one or more properties to one or more "items".

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a "defined property name" allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref

This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the "item". Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.

itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope="itemscope").

Possible values:

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.

lang Sets the language code to be used.

Possible values:

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck Specifies whether the element should have its spelling checked.
ValueDescription
[Empty string]The element should have its spelling checked.
trueThe element should have its spelling checked.
falseThe element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent's own spellcheck state.

style Specifies inline styles for this <menuitem> element. This allows you to define the styles within the page, and within this <menuitem> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for the element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).

Possible values:

[Any valid integer. For example, 0, 1, 2, 3, ...etc]

title Specifies a title to associate with this particular <menuitem> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").

Possible values:

[Any text to be displayed as a "tool tip".]

translate Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

  • [Empty String]
  • yes
  • no

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handlers

This element also accepts various event handlers. Event handlers are commonly used to extend the functionality of an HTML element.

For a list of event handlers that you can use with this element, see Event handlers on elements, Document objects, and Window objects at the W3C website.

More Information About the <menuitem> Element

Content Categories

None.

Can be usedAs a child of a <menu> element whose type attribute is in the popup menu state.
Content modelEmpty.
End Tag Required?No. You can only use a start tag when using the <menuitem> element, it must not have a closing tag.
  • Right: <menuitem>
  • Wrong: <menuitem></menuitem>

Note that as of this writing, the <menuitem> only works properly (in Firefox) if a closing tag is included.

DOM InterfaceHTMLMenuItemElement

Specifications for the <menuitem> Element

Here is the <menuitem> element defined in the various specifications: