HTML / Element

The `nav` element marks important navigation links

A page can have links to other pages on the site and links to other places on the same page. The nav element marks an important group of links that helps people move between those places.

The short answer

Use nav for important navigation, such as the site's main menu or a table of contents.

You do not need to wrap every group of links in nav. A short list of links does not always need to be marked as navigation.

A small example

<nav aria-label="Site navigation">
  <ul>
    <li><a href="/about/">About this site</a></li>
    <li><a href="/topics/">Topics</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

nav gives the group a meaning. The links inside it are the a elements. Adding nav alone does not change how the page looks or make links work.

What kinds of navigation fit?

A menu with links to the site's main pages
A table of contents with links to headings in an article
Breadcrumbs that show the path to the current page
Links to the previous or next page in a set

Ask whether people would benefit from finding this group quickly as a way to move around. A group that only looks like a menu does not need nav if it is not a major navigation area.

Give each navigation area a clear name

A page may have more than one navigation area. The site menu, breadcrumbs, and an article's table of contents have different purposes, so their names should make that clear.

<nav aria-label="On this page">
  <ol>
    <li><a href="#meaning">What nav means</a></li>
    <li><a href="#examples">Examples</a></li>
  </ol>
</nav>

You can name a navigation area with aria-label or with a heading referenced by aria-labelledby. Use different names for navigation areas with different purposes. Repeated areas with the same links can use the same name. If a page has only one navigation area, a name is optional.

It does not have to contain a list

The content inside nav does not have to be a ul or ol. The HTML standard allows ordinary flow content such as paragraphs. Choose a list or another structure that fits the links and their order.

Common mistakes

Wrapping every link on the page in nav
Giving the site menu, breadcrumbs, and table of contents the same name
Expecting the nav element to turn its text into links
Using nav only to change how something looks

A short list of footer links, such as terms and copyright information, usually does not need to be a navigation area.

Check the details in Atlas

For the exact meaning and content model, the navigation landmark mapping, names for multiple areas, and browser, WPT, and accessibility-tree observations, see the Yugien Atlas page about the nav element. For the central content of a page, see the main element guide.

The nav element marks important navigation links