HTML <Nav> Tag

Definition

The <nav> tag specifies a section of a page whose purpose is to link to other pages or parts of the same page, such as navigation links.

Example

<nav class="menu">
    <ol>
        <li class="menu_item"><a href="#">Item 1</a></li>
        <li class="menu_item"><a href="#">Item 2</a></li>
        <li class="menu_item"><a href="#">Item 2</a></li>
    </ol>
</nav>

Usage

• Both the opening tag and closing tag is required.
• Common uses of the <nav> element include navigation menus, breadcrumbs, tables of content.
• Not all navigation links need to use the <nav> element. It should be used for major blocks of links only. For example, a shortlist of links in a footer does not need to be within a <nav> element.
• Where a navigation menu consists of a list of items, it is recommended to use list markup to enable better understanding and navigation.
• A web page may have several sets of links, for instance, the main menu and a sidebar menu. You can use the aria-labelledby attribute on the <nav> element to describe each set of navigation links for assistive technology, such as screen readers.

Attributes

The Nav element only supports the Global Attributes.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Best Practices

• For interfaces, you may wish to assign shortcut keys to main navigation items, although you should be aware that it may conflict with assistive technology functionality. For general websites assigning shortcuts is not recommended.

  You can assign an access key using accesskey attribute. For example:

  <nav class="menu">
    <ol>
        <li class="menu_item" accesskey="a"><a href="#">Save</a></li>
        <li class="menu_item"><a href="#">Load</a></li>
        <li class="menu_item"><a href="#">Delete</a></li>
    </ol>
  </nav>

  Activating the key will depend on the OS and browser. For example in Firefox on Windows you would activate the above example by pressing Alt + Shift + a.

Desktop

Mobile