Summary -

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

Specifying list of menu commands. <menu> tag is used to specify the list of menu commands in HTML documents. <menu> tag used to create menus, toolbars and form listing controls etc,.

<menu> tag mostly used along with <menuitem>. <menu> tag can also contains list items(<li> and horizontal rules(<hr>) to separate items logically.

The tag can be specified like <menu type=""></menu>. <menu> tag is nested element. The <menu> element was deprecated in HTML 4.01. The <menu> element is redefined again in HTML5.

Note! <menu> tag is supported by Firefox only at the time of writing the code.

Syntax -

<menu>.. text here.. </menu>

Required Attributes -

AttributeDescriptionValues
LabelSpecifies the menu visible label.HTML5 attributeText

Optional Attributes -

AttributeDescriptionValues
TypeSpecified the menu type to display.HTML5 attributeListToolbarcontext

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

India map

Right click on the image to invoke the context menu.

Note! Only supported in Firefox at time of writing.