The HTML 5 menu tag, for a simpler future

Near the select tag, menu is added in HTML 5 to create a context menu or a toolbar, depending on the type assigned to the tag.

In fact the content is more varied than select and rendering capabilities are more developed.

The tag is currently rarely implemented. Checking in your browser, there must be below a horizontal menu:

File

Edit

Help

It is actually possible to get the desired result with a stylesheet (see links below), which probably explains the delay to implement this tag.

Here is an image of toolbar made with the menu tag, and buttons or CSS 3, given by the W3C:

Syntax

A menu may contain options, a list of buttons, other menus, command tags, input, separators <hr>.

This element must have an opening tag and a closing tag contrary to inner elements.

<menu type="" label="">
</menu>

<menu type="" label="">
  <option>
  <option>
</menu>

<menu type="" label="">
  <li>
  <li>
</menu>

A button can represent a sub-menu, in this case the syntax may look like this:

<menu type="toolbar">
 <li>
  <menu label="File">
    <button type="button" onclick="fopen()">Open</button>
    ... boutons....
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="fcopy()">Copy</button>
    ...
  </menu>
 </li>
</menu>

Rendering is the image above. An inner menu inside a toolbar menu is rendered as a button.

Attributes of menu

Attribute	Value	Purpose	Version
type	"context"	List of commands that appears in a context.	HTML 5
type	"toolbar"	Toolbar of icons representing sub-menus or commands.	HTML 5
type	"list" (default)	List of commands.
label	string	To identify the menu or the submenu.	HTML 5
ID	string	Identifier used to associate a menu to an element.

Relative attribute

This attribute associates a menu to another element in the page with the ID of the menu tag. So it is a general attribute for any HTML tag.

Attribute	Value	Purpose	Version
contextmenu	ID of a menu	Associate a context menu to an item.	HTML 5

When the mouse is over an item, or a keyboard key is pressed on this element, an event "show" is activated, the contextual menu whose id is assigned to contextmenu should automatically appear.

Attributes of inner elements (commands)

Regardless of their type, list item, option, button, menu items are commands and have a set of useful attributes. They are called facets.

Attribute	Value	Purpose	Version
type	commande	Defines the type of the element. Ex: radio.
id	string	Identifier.
label	string	Text displayed and visible to the user.	HTML 5
hint	string	A hint to describe the function.	HTML 5
icon	URL	Address of an image.	HTML 5
disabled	disabled/none	Active state or not.
checked	checked/none	Element checked or not.
hidden	true/false	Element hidden or not.
action	URL/script/<a>	Action associated with the item.

Action can be an attribute of submission form action="", or JavaScript event. If the element is a single URL in a <a> tag , the action is inside the href attribute.

JavaScript

You can access these attributes with those JavaScript varibles, if the menu item in the DOM is given the name element:

element.commandType for the type.
element.id
element.label
element.title for hint.
element.icon
element.accessKeyLabel to the Access Key attribute.
element.hidden for the state hidden or not.
element.disabled for the state active or not.
element.checked for the state checked or not.
element.click()
This activates the action associated with the element. If it is an attribute action="", the content assigned will be executed, otherwise the action will be interpreted.
If the command is a <a> tag , the URL assigned to href is loaded.

See also

Tab panel in CSS.
This demonstration uses a list to create tabs entirely with CSS.The same principle can be applied to a horizontal menu.