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
type="context"
type="toolbar"
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
<menu>
   <li><input type="radio" name="drinks"/>Coffee</li>
   <li>>input type="radio" name="drinks"/>Tea</li>
</menu>
Menu with Check Boxes
<menu>
   <li><input id="cream" type="checkbox" name="withCream"/>Cream</li>
   <li><input id="sugar" type="checkbox" name="withSugar"/>Sugar</li>
</menu>

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;
    }
    </style>
    <menu type="toolbar">
       <li>
          <menu label="Sections">
             <li><a href="../../tutorials/">Tutorials</a></li>
             <li><a href="../../examples/">Examples</a></li>
          </menu>
       </li>
       <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>
          </menu>
       </li>
    </menu>
    </nav>

    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