HTML <nav> Tag - Navigation Section


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 <nav> Tag in HTML 5

The <nav> tag is used to create a navigation section on a web page, a section whose primary purpose is to provide links to specific areas within the page or to other web pages. It is one of the sectioning tags in HTML 5.

A navigation section with a series of inline hypertext links can be used to create a breadcrumb trail:

This is an actual working demo of the breadcrumb trail example code below.

Drop-Down Menu Demo

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.

<nav> Tag Syntax

Rules for coding HTML nav elements
   ... flow content expected ...
      ... flow content ...
  1. Inside an element where flow content is allowed, code one or more optional nav elements.
  2. Begin each nav element with a starting <nav> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <nav> tag as appropriate.
  4. End the nav element with a matching </nav> closing tag.
  5. Inside the nav element, code the appropriate flow content.

<nav> Content Model

Content of the <nav> Tag

The content of the nav element can include HTML comments, text content and any tags that can be used in flow content.

<nav> Tag Attributes

Attributes of the <nav> tag
global attributes The only attributes that can be coded on the <nav> tag are the common HTML attributes.

<nav> Tag Examples

Examples of the nav tag in HTML 5
   <a rel="up up" href="../../index.html">HTML 5</a>&#160;&gt;&#160;
   <a rel="up" href="../index.html">HTML Tags</a>&#160;&gt;&#160;
   <b>HTML &lt;nav&gt; tag</b>

As shown in the example above, the value up may be specified more than once in the <a rel> attribute: rel="up" points to the parent document, rel="up up" points to the grandparent, and so forth.

Search Engine Friendly Navigation Section with Breadcrumb Trail

Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.

Search Engine Results

HTML <a href> Tag

Description, syntax, usage, attributes and examples of the HTML <a href> tag. › HTML TagsHTML <a href> TagExamples

To code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:

<nav class="breadcrumb-trail">
      <li itemscope="itemscope" itemtype="">
         <a itemprop="url" rel="up up up" href="/">
            <span itemprop="title">HTML 5</span>
      <li itemscope="itemscope" itemtype="">
         <a class="nobr" itemprop="url" rel="up up" href="/tags/">
            <span itemprop="title">HTML Tags</span>
      <li itemscope="itemscope" itemtype="">
         <a itemprop="url" rel="up" href="./">
            <span itemprop="title">HTML <a href> Tag</span>
      <li itemscope="itemscope" itemtype="">
         <a itemprop="url" href="#examples#">
            <span itemprop="title">Examples</span>
Drop-Down Menu
(see toolbar with drop-down menu demo above)
<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 - <nav> Tag

What's new in HTML 5

The <nav> tag is one of the new elements in HTML 5. It is one of the new sectioning tags in HTML 5, which are intended to reduce the need to use <div> tags for sectioning purposes.

Differences between HTML 5 and earlier versions of HTML

The <nav> tag did not exist in older versions of HTML.

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

Valid HTML 5