menu
elementtype
attribute is in the toolbar state: Interactive content.li
elements.type
label
interface HTMLMenuElement : HTMLElement { attribute DOMString type; attribute DOMString label; };
The menu
element represents a list of commands.
The type
attribute is an enumerated attribute indicating the kind of menu being declared. The attribute has three states. The context
keyword maps to the context menu state, in which the element is declaring a context menu. The toolbar
keyword maps to the toolbar state, in which the element is declaring a toolbar. The attribute may also be omitted. The missing value default is the list state, which indicates that the element is merely a list of commands that is neither declaring
a context menu nor defining a toolbar.
If a menu
element's type
attribute is in the context menu state, then the element represents the commands of a context menu, and the user can only interact with the commands if that context menu is activated.
If a menu
element's type
attribute is in the toolbar state, then the element represents a list of active commands that the user can immediately interact with.
If a menu
element's type
attribute is in the list state, then the element either represents an unordered list of items (each represented by an li
element), each of which represents a command that the user can perform or activate, or, if the element has no li
element children, flow content describing available commands.
The label
attribute gives the label of the menu. It is used by user agents to display nested menus in the UI. For example, a context menu containing another menu would use the nested menu's label
attribute for the submenu's menu label.
The type
and label
IDL attributes must reflect the respective content attributes of the same name.
The menu
element is used to define context menus and toolbars.
For example, the following represents a toolbar with three menu buttons on it, each of which has a dropdown menu with a series of options:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
In a supporting user agent, this might look like this:
In a legacy user agent, the above would look like a bulleted list with three items, the first of which has four buttons, the second of which has three, and the third of which has two nested bullet points with two items consisting of links.
The following implements a similar toolbar, with a single button whose values, when selected, redirect the user to Web sites.
<form action="redirect.cgi"> <menu type="toolbar"> <label for="goto">Go to...</label> <menu label="Go"> <select id="goto"> <option value="" selected="selected"> Select site: </option> <option value="http://www.apple.com/"> Apple </option> <option value="http://www.mozilla.org/"> Mozilla </option> <option value="http://www.opera.com/"> Opera </option> </select> <span><input type="submit" value="Go"></span> </menu> </menu> </form>
The behavior in supporting user agents is similar to the example above, but here the legacy behavior consists of a single select
element with a submit button. The submit button doesn't appear in the toolbar, because it is not a direct child of the menu
element or of its li
children.
The contextmenu
attribute gives the element's context menu. The value must be the ID of a menu
element in the DOM.
The contextMenu
IDL attribute must reflect the contextmenu
content attribute.
Here is an example of a context menu for an input control:
<form name="npc"> <label>Character name: <input name=char type=text contextmenu=namemenu required></label> <menu type=context id=namemenu> <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"> <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> </menu> </form>
This adds two items to the control's context menu, one called "Pick random name", and one called "Prefill other fields based on name". They invoke scripts that are not shown in the example above.