The HTML <menu>
element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.
Notes: This element was deprecated in HTML4, but reintroduced in HTML5.1 (still working draft).")}}. This document describes current Firefox implementation. Type 'list' is likely to change to 'toolbar' according to HTML5.1 working draft.")}}
Content categories | Flow content. Additionally, if in the list menu state, palpable content. (list menu is the default state, unless the parent element is a {{HTMLElement("menu")}} in the context menu state.) |
---|---|
Permitted content | If the element is in the list menu state: flow content, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. If the element is in the context menu state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (context menu state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. |
Tag omission | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | {{domxref("HTMLMenuElement")}} |
Attributes
This element includes the global attributes.
- {{htmlattrdef("label")}}
- The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the context menu state.
- {{htmlattrdef("type")}}
- This attribute indicates the kind of menu being declared, and can be one of two values.
context
: Indicates the popup menu state, which represents a group of commands activated through another element. This might be as a button menu referenced by a {{htmlattrxref("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with acontextmenu
attribute. This value is the default if the attribute is missing and the parent element is also a<menu>
element.toolbar
: Indicates the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no<li>
element children, flow content describing available commands. This value is the default if the attribute is missing.
Examples
Context menu
HTML content
<!-- A <div> element with a context menu --> <div contextmenu="popup-menu"> Right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem label="Action"> <menuitem label="Another action"> <hr> <menuitem label="Separated action"> </menu>
CSS content
div { width: 300px; height: 80px; background-color: lightgreen; }
Result
{{EmbedLiveSample('Context_menu', '300', '80')}}
Menu button
HTML content
<!-- A button, which displays a menu when clicked. --> <button type="menu" menu="popup-menu"> Dropdown </button> <menu type="context" id="popup-menu"> <menuitem label="Action"> <menuitem label="Another action"> <hr> <menuitem label="Separated action"> </menu>
Result
{{EmbedLiveSample('Menu_button', '200', '50')}}
Toolbar
HTML content
<!-- A context menu for a simple editor, containing two menu buttons. --> <menu type="toolbar"> <li> <button type="menu" menu="file-menu">File</button> <menu type="context" id="file-menu"> <menuitem label="New..." onclick="newFile()"> <menuitem label="Save..." onclick="saveFile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">Edit</button> <menu type="context" id="edit-menu"> <menuitem label="Cut..." onclick="cutEdit()"> <menuitem label="Copy..." onclick="copyEdit()"> <menuitem label="Paste..." onclick="pasteEdit()"> </menu> </li> </menu>
Result
{{EmbedLiveSample('Toolbar', '120', '100')}}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '<menu>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5.1', 'interactive-elements.html#the-menu-element', '<menu>')}} | {{Spec2('HTML5.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
type="context" |
{{CompatNo}} | {{CompatGeckoDesktop("8")}}[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
type="toolbar" |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
type="context" |
{{CompatUnknown}} | {{CompatVersionUnknown}}[2] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
type="toolbar" |
{{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Only works as context menu, not as button menu.
[2] Nested menus are not supported.
See also
- Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} and the obsolete {{HTMLElement("dir")}}.
- The
contextmenu
global attribute can be used on an element to refer to theid
of amenu
with thecontext
{{htmlattrxref("type","menu")}}.