HTML <menu> Tag for Drop-Down Menus


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <menu> Tag in HTML 5

The <menu> tag provides an easy way to create menus on a web page. It is one of the tags for interactive content in HTML. As in previous versions of HTML, a web site's menu system can be coded in XSLT templates coded in style sheets referenced from multiple web pages in order to create a cacheable site-wide menu.

This is an actual working example of the drop-down menu example code below. It shows how to implement a drop-down menu without JavaScript. It only requires CSS, which works even if JavaScript is disabled for some reason.

<menu> Tag Syntax

Rules for coding HTML menu elements
Child Elements of the <menu> tag
<li> tag(s)
The <menu> tag can contain a list of commands, similar to an unordered list.
<button> tag(s)
<command> tag(s)
<select> tag(s)

<menu> Tag Attributes

Attributes of the <menu> tag
global attributes In addition to the personal attributes of the <menu> tag below, any of the common HTML attributes can also be coded.
label The label attribute
The type attribute is optional and indicates the type of menu. When omitted, the menu is simply a list of commands. type="context" is used to create a pop-up context menu. The user can typically display the context menu by clicking the second mouse button. type="toolbar" is used to create a tool bar.

<menu> Tag Examples

Examples of the menu tag in HTML 5
Menu with Radio Buttons
   <li><input type="radio" name="drinks"/>Coffee</li>
   <li>>input type="radio" name="drinks"/>Tea</li>
Menu with Check Boxes
   <li><input id="cream" type="checkbox" name="withCream"/>Cream</li>
   <li><input id="sugar" type="checkbox" name="withSugar"/>Sugar</li>

Select your preferred beverage and any additives:

  • Coffee
  • Tea
  • Cream
  • Sugar

    <nav style="height: 1.5em">
    <style scoped="scoped">
    menu[type="toolbar"], menu[type="toolbar"] * {
       margin: 0;
       padding: 0:
    menu[type="toolbar"] > li {
       display: inline-block;
       vertical-align: top;
       border: 2px solid #000000;
    menu[type="toolbar"] > li > menu {
       float: left;
       width: 8em;
       background-color: #cccccc;
       text-align: center;
    menu[type="toolbar"] > li > menu:before {
       content: attr(label);
       color: #333333;
    menu[type="toolbar"] > li > menu > li {
       position: relative;
       z-index: 1;
       background-color: #cccccc;
       text-align: left;
       display: none;
       -moz-transition: background-color 0.3s;
       -webkit-transition: background-color 0.3s
    menu[type="toolbar"] > li > menu:hover > li {
       display: block;
    menu[type="toolbar"] > li > menu:hover > li:first-child {
       border-top: 2px solid #000000;
    menu[type="toolbar"] > li > menu > li > a {
       padding: 0 1em;
       color: #333333;
       text-decoration: none;
    menu[type="toolbar"] > li > menu:hover,
    menu[type="toolbar"] > li > menu:hover:before,
    menu[type="toolbar"] > li > menu > li:hover,
    menu[type="toolbar"] > li > menu > li:hover > a
       background-color: #999999;
       color: #000000;
    <menu type="toolbar">
          <menu label="Sections">
             <li><a href="../../tutorials/">Tutorials</a></li>
             <li><a href="../../examples/">Examples</a></li>
          <menu label="&lt;menu&gt;">
             <li><a href="#description">Description</a></li>
             <li><a href="#syntax">Syntax</a></li>
             <li><a href="#attributes">Attributes</a></li>
             <li><a href="#examples">Examples</a></li>
             <li><a href="#whats-new">Changes</a></li>

    Changes in HTML 5 - <menu> Tag

    What's new in HTML 5

    The <menu> tag has been redefined in HTML version 5. In addition, the label, type and global contextmenu attributes have been added.

    Differences between HTML 5 and earlier versions of HTML

    The <menu> tag was deprecated in HTML version 4 and has now been redefined in HTML 5. Make sure that you are using the HTML 5 definition of the <menu> tag, not a pre-HTML v4 definition.

    The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the menu element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

    Valid HTML 5