HTML menuitem tag

Summary -

In this topic, we described about the <menu> tag along with detailed example.

The <menuitem> tag is new in HTML5. Specifying the command or menuitem that user can invoke from a popup menu. <menuitem> tag is used to specify the command or menuitem that user can invoke from a popup menu.

The tag can be specified like <menuitem></menuitem>. A <menu> tag can contain more than one <menuitem> elements.

Syntax -

<menuitem>.. text here.. </menuitem>

Required Attributes -

Attribute	Description	Values
Label	Specifies the name of the menu item	Text

Optional Attributes -

Attribute	Description	Values
checked	Specifies the menu item should be checked when page loads	Checked
Command	Specifies the menu item action behavior
Default	Specifies the menu item as being a default	Default
Disabled	Specifies the menu item should be disabled	Disabled
Icon	Specifies the icon of the menu item	URL
Radiogroup	Specifies the name of the group of commands.Specially for radio	Group name
Type	Specifies the type of menu item	CheckboxCommand(default)radio

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Menu Tag example.. </title>	
	</head>
	<body>
	    <img id="myPic" src="img/india.gif" contextmenu="tcmenu" 
	    alt="India map" height="180" width="150" ><br>
	    <p>Right click on image to invoke the context menu. </p>

	    <menu type="context" id="tcmenu">
		   <menuitem label="Home" onclick="window.open
			('https://www.tutorialscampus.com');">
		   </menuitem>
		   <menu label="Tutorials">
			 <menuitem label="html" 
				onclick="window.open('html/index.htm');">
			 </menuitem>
			 <menuitem label="sap-abap" 
				onclick="window.open('sap-abap/index.htm');">
			 </menuitem>
		   </menu>
		   <menuitem label="Contact us"
			onclick="window.open('contact-us.php');">
		   </menuitem>
	    </menu>	
	</body>
</html>

Output -

Right click on the image to invoke the context menu.

Note! Only supported in Firefox at time of writing.