The <menu> element

The <menu> element represents a list of commands or menu items that may be applied to an HTML document as context menus, toolbars or as many other useful applications.

Syntax:

<menu></menu>

Attributes:

label; Defines a name for the visible label for the menu
type; Defines the type of the menu to use; It may be:
- list; In the form of popup, representing a group of commands activated through another element
- toolbar; Specifies a toolbar type of a menu where active commands let a user interact immediately
- context; Specifies a context type of a menu where menu must be activated before user is allowed to interact with it
global attributes
event attributes

NOTE: The <menu> element unfortunately is currently not very well supported by the browsers.

Example

The menu tag example with menu items:

<!DOCTYPE html>
<html lang='en-us'>
<head><style type='text/css'>
    body{background-color:#343434; color:#ddd;}
    menu{background-color:#f0f0f0; padding:2px 5px; width:90%; margin:0.5em auto; height:150px}
    menuitem{background:#333; height:22px; margin:0px;}
</style></head>
<body>
  <div id="page-wrapper">
 <h1>HTML5 Context Menu Demo</h1>
<p>Context menus are currently only supported in Firefox 8+</p>
 <div id="target" contextmenu="menu">Right-click here to see the menu.</div>
<menu type="context" id="menu">
 <menuitem label="Tweet This Page" onclick="window.location='https://twitter.com/intent/tweet?text=' + document.title + ' ' + window.location.href;" icon="img/twitter.png"></menuitem>
 <menuitem label="Digg This Page" onclick="window.location='http://digg.com/submit?url='+window.location;" icon="img/digg.png"></menuitem>
 <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location;">
</menuitem>
  </menu>
</div>
</body>
</html>

›› go to examples ››

The <menu> element

Syntax:

Attributes:

Example

The menu tag example with menu items:

Comments

About

Contact

Get Connected