HTML <menu> Tag


Example

A context menu with different <menuitem> elements:

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

Try it Yourself »

Definition and Usage

The <menu> tag defines a list/menu of commands.

The <menu> tag is used for context menus, toolbars and for listing form controls and commands.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<menu> Not supported Not supported 8.0
(only context menus)
Not supported Not supported

Tips and Notes

Tip: Use CSS to style menu lists.


Differences Between HTML 4.01 and HTML5

The <menu> element was deprecated in HTML 4.01.

The <menu> element is redefined in HTML5.


Attributes

= New in HTML5.

Attribute Value Description
label text Specifies a visible label for the menu
type popup
toolbar
context
Specifies which type of menu to display

Global Attributes

The <menu> tag also supports the Global Attributes in HTML.


Event Attributes

The <menu> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Menu Object


Default CSS Settings

Most browsers will display the <menu> element with the following default values:

menu {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}




SHARE THIS PAGE

COLOR PICKER

colorpicker