HTML menuitem - how to use <menuitem> tag

The HTML <menuitem> tag is used to define individual commands which can be used as context menu.

The type attribute defines how the menu tag is rendered. When the type attribute is in list state, the tag is rendered as an unordered list of commands represented by li tags.

When the type attribute is in context menu state, the commands are displayed as context menu and is available to the user when the context menu is activated.

When the type attribute is in toolbar state, the commands are displayed as a list of active commands.

The menu tag is only supported in FireFox.

Attributes

The menuitem tag supports the global and event attributes.

checked
Defines the context menu item should be checked. This works if the context menu item is checkbox or radio.
command
Defines the
default
Defines that the context menu item is the default command
disabled
Defines that the context menu item is disabled
icon
Defines the icon of the context menu item
label
Defines the name of the context menu item
radiogroup
Defines the name of the group of context menu items. This works for radio context menu items.
type
Defines the type of the menu item. Available option are:
  • command
  • checkbox
  • radio

Examples:

<section contextmenu="cmenu"> <p>Right click on this section to see the context menu. Note that the context menu only works in Firefox.</p> </section> <menu type="context" id="cmenu"> <menu label="Share this page" icon="images/share.gif"> <menuitem label="Twitter" icon="images/twitter.gif" onclick="shareOnTwitter()"></menuitem> <menuitem label="Facebook" icon="images/facebook.gif" onclick="shareOnFacebook()"></menuitem> </menu> </menu> <script> function shareOnTwitter() { var url = window.location.href; //share function not implemented share(url); } function shareOnFacebook() { var url = window.location.href; //share function not implemented share(url); } </script>

Useful links: