Description

The HTML element <menu> is used to define a menu (or a list) of commands that a user can perform.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain the elements <menu>, <menuitem>, <li>, <hr>, and <script>.
Tags Both the opening and closing tags are required.
Versions HTML 2, 3.2, 4, 4.01, 5
This element is deprecated in HTML 4.01 but reintroduced in HTML5.
It is not supported by most of the major browsers, so it's better to avoid using it.

Syntax

Here is the basic syntax of the <menu> element.

<menu>...</menu>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element menu</title>
    <script type="text/javascript">
	function zoomin(){
		var myImg = document.getElementById("sky");
		var curr_width = myImg.clientWidth;
		if(curr_width == 500){
			alert("Maximum zoom-in level reached.");
		} else{
			myImg.style.width = (curr_width + 50) +"px";
		} 
	}
	function zoomout(){
		var myImg = document.getElementById("sky");
		var curr_width = myImg.clientWidth;
		if(curr_width == 50){
			alert("Maximum zoom-out level reached.");
		} else{
			myImg.style.width = (curr_width - 50) +"px";
		}
	}
    </script>
</head>
<body>
    <img src="/assets/images/sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <menu type="context" id="skymenu">
        <menuitem label="Zoom In" icon="/assets/images/zoom-in.png" onclick="zoomin()">
        <menuitem label="Zoom Out" icon="/assets/images/zoom-out.png" onclick="zoomout()">
        <menuitem label="Reload Image" icon="/assets/images/reload.png" onclick="window.location.reload();">
    </menu>
    <p>To check this example in action, right click on the image and select zoom-in, zoom-out or reload option from the contextmenu.</p>
    <p>Note: This example works only in Firefox.</p>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <menu> element.

Attribute Type Details
Element-Specific Attributes The tag <menu> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <menu> supports the HTML Global Attributes.
Event Attributes The tags <menu> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <menu> element.

Attribute Value Description
label text Specifies a visible label for the menu.
type popup, toolbar, context Specifies the type of menu to be displayed on the UI.

Browser Compatibility

The tags <menu> is supported in all modern browsers.

  • Google Chrome x
  • Internet Explorer or Edge x
  • Firefox 8+
  • Apple Safari x
  • Opera x

Related Links