HTML <menu> Tag
The HTML <menu> tag is used for specifying a list of commands.
The <menu> tag can be used along with the <menuitem> tag in order to present a command that the user can invoke from a popup menu (either a context menu or the menu of a menu button). It can also contain other elements, such as list items (<li>), horizontal rules (<hr>) to separate menu items into logical groups, and any other flow content or script supporting elements.
The basic tag is written like this <menu type=""></menu> with the menu type written between the double quotes of the type attribute. Menu items/commands are nested between the opening and closing tags.
This tag is not included in the W3C HTML5 specification. However, it is included in the HTML 5.1 draft specification, as well as the WHATWG HTML Living Specification.
Also note that the <menu> was included in earlier versions of HTML and deprecated in HTML 4. However, it has now returned in the HTML 5.1 draft and the HTML Living Standard.
Example
When the user right click's on the image, a context menu appears with various options specific to this image. In this case we've added an option to change the color of the border. We have also added links to further information about the photo topic.
Note that at the time of writing, this feature was only supported in Firefox.
Also note that, although the <menuitem> element is an empty element and should not have a closing tag, this example currently only works by using a closing tag.
| Source Code | Result |
|---|---|
Right click on the image to invoke the context menu. Note: Only supported in Firefox at time of writing. |
Attributes
The <menu> tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.
Attributes Specific to the <menu> Element
| Attribute | Description |
|---|---|
| type | Specifies the kind of menu being declared.
Possible values:
|
| label | Specifies the label of the menu. It is used by the browser/user agent to to display nested menus. |
Global Attributes
The <menu> tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.
| Attribute | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| accesskey | Specifies a shortcut key that can be used to access this <menu> element.
Possible values. [Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.] |
||||||||||||
| class | This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use. | ||||||||||||
| contenteditable | This attribute specifies whether the user can edit the content or not.
Possible values:
|
||||||||||||
| contextmenu | The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM. |
||||||||||||
| dir | Specifies the direction of the text.
Possible values:
|
||||||||||||
| draggable | Specifies whether the user is allowed to drag this <menu> element or not.
Possible values:
|
||||||||||||
| dropzone | The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <menu> element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. Possible values:
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied. |
||||||||||||
| hidden | Indicates that this particular <menu> element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
||||||||||||
| id | The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
|
||||||||||||
| itemid | The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.
The |
||||||||||||
| itemprop | This attribute provides one or more properties to one or more "items".
Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:
Also, |
||||||||||||
| itemref | This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the "item". Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
|
||||||||||||
| itemscope | HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
||||||||||||
| itemtype | This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.
The |
||||||||||||
| lang | Sets the language code to be used.
Possible values: [Must be a valid RFC 3066 language code, or an empty string.] |
||||||||||||
| spellcheck | Specifies whether the element should have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent's own |
||||||||||||
| style | Specifies inline styles for this <menu> element. This allows you to define the styles within the page, and within this <menu> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
|
||||||||||||
| tabindex | Helps determine the tabbing order for this <menu> element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).
Possible values: [Any valid integer. For example, 0, 1, 2, 3, ...etc] |
||||||||||||
| title | Specifies a title to associate with this particular <menu> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").
Possible values: [Any text to be displayed as a "tool tip".] |
||||||||||||
| translate | Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The
If the |
Event Handler Content Attributes
The <menu> tag also accepts the event handler content attributes listed below.
An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.
Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick="", you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.
Here are the event handler content attributes that can be used with the <menu> element.
| Attribute | Description |
|---|---|
| onabort | Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded. |
| onblur | User has left the focus of the element. |
| oncancel | cancel event handler. |
| oncanplay | Invoked when the browser/user agent can start playing media, but hasn't yet, due to buffering. In other words, if playback were to begin now, it wouldn't play right to the end (due to the current playback rate) - it would need to pause during playback in order to load the rest of the media. |
| oncanplaythrough | The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. |
| onchange | User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). |
| onclick | Invoked when the user clicked on the object. |
| onclose | close event handler. |
| oncontextmenu | Invoked when a context menu has been triggered. |
| oncuechange | cuechange event handler. |
| ondblclick | Invoked when the user clicked twice on the object. |
| ondrag | Invoked when an element is being dragged. |
| ondragend | Invoked when an element has stopped being dragged. |
| ondragenter | Invoked when an element has been dragged to a drop target. |
| ondragexit | dragexit event handler. |
| ondragleave | Invoked when an element leaves a valid drop target. |
| ondragover | Invoked when an element is being dragged over a valid drop target. |
| ondragstart | Invoked when a drag operation has started. |
| ondrop | Invoked when an element is being dropped. |
| ondurationchange | Invoked when the length of the media is changed (i.e. the duration attribute has just been updated). |
| onemptied | Invoked when a media resource element suddenly becomes empty (for example, due to a network error). |
| onended | Invoked when the media has reached the end. |
| onerror | Invoked when an error occurs while the element is being loaded. Also handler for script error notifications. |
| onfocus | Invoked when the focus is on the element. |
| oninput | input event handler. |
| oninvalid | invalid event handler. |
| onkeydown | Invoked when a key was pressed over an element. |
| onkeypress | Invoked when a key was pressed over an element then released. |
| onkeyup | Invoked when a key was released over an element. |
| onload | The element has loaded. |
| onloadeddata | Invoked when the browser/user agent can render the media data at the current playback position for the first time. |
| onloadedmetadata | Invoked when the browser/user agent has just determined the duration and dimensions of the media resource. |
| onloadstart | Invoked when the browser/user agent has started loading the media resource. |
| onmousedown | The cursor moved over the object and mouse/pointing device was pressed down. |
| onmousemove | The cursor moved while hovering over an object. |
| onmouseout | The cursor moved off the object |
| onmouseover | The cursor moved over the object (i.e. user hovers the mouse over the object). |
| onmouseup | The mouse/pointing device was released after being pressed down. |
| onmousewheel | Invoked when the mouse wheel is being rotated. |
| onpause | Invoked when the media resource has been paused. |
| onplay | Invoked when the media resource starts playback. |
| onplaying | Playback has begun. |
| onprogress | The browser/user agent is fetching media data the. |
| onratechange | Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated). |
| onreset | reset event handler. |
| onresize | resize event handler. |
| onscroll | scroll event handler. Invoked when the element's scrollbar is being scrolled. |
| onseeked | Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true) |
| onseeking | Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. |
| onselect | Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field. |
| onshow | show event handler. |
| onstalled | Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming). |
| onsubmit | User submitted a form. |
| onsuspend | The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download). |
| ontimeupdate | Invoked when the media's current playback position changed. |
| onvolumechange | Invoked when either the volume attribute or the muted attribute has changed. |
| onwaiting | The next frame of the media is not yet available (but the browser/user agent expects it to become available). |
More Information About the <menu> Element
| Content Categories |
|
|---|---|
| Can be used |
|
| Content model |
|
| End Tag Required? | Yes. Any time you use the <menu> element, it must have both a start tag and an end tag.
|
| DOM Interface | HTMLMenuElement |
Specifications for the <menu> Tag
Here is the <menu> element defined in the various specifications:
- W3C (HTML5). Note that this link goes to a draft specification page for HTML 5.1. This is because, at the time of writing, the
<menu>element is not in the HTML5 specification - it's only in the HTML 5.1 draft specification. - WHATWG (HTML Living Standard)