0%

<nav> Navigation

Wraps the major navigation links.

By HTML6 (opens in a new tab) · Updated · How we write and check content

Put <nav> around a group of important links: the main menu, a table of contents, breadcrumbs. It is a navigation landmark, so screen reader users can jump straight to it.

Not every set of links needs one, and a handful of links in a footer usually does not. The common pattern is a list (<ul>) inside the nav. When a page has several navs, label each with aria-label, such as aria-label="Main".

Which link groups deserve a nav is discussed in the nav element in the WHATWG specification (opens in a new tab). The Landmarks lesson shows how screen readers use it.

Syntax

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

When to use it

Wrap a group of links in nav when it helps people move around the site or the page: the main menu, documentation chapters in a sidebar, a table of contents for a long article, pagination, breadcrumbs. Would someone want to jump straight to this block? If so, it deserves a navigation landmark.

Links inside running text, a list of related articles and a row of social media icons usually do fine without one. Many sites skip nav for small footer link lists too, although a large footer menu that mirrors the site structure can be a nav with its own label.

Name the purpose in the label and leave the element out of it. Screen readers already announce "navigation", so aria-label="Main navigation" comes out as "Main navigation navigation". Short names like "Main", "Footer" or "Breadcrumb" work best, and the W3C landmarks patterns (opens in a new tab) show more labelled navigation regions.

Live example

Edit the code and watch the preview.

<nav aria-label="Main">
  <ul>
    <li><a href="index.html" aria-current="page">Home</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

More examples

Breadcrumb trail

A breadcrumb shows where the page sits in the site. An ordered list keeps the steps in sequence, the nav gets the label "Breadcrumb", and the last item is marked with aria-current="page". CSS puts the items on one line with separators.

<style>
.crumbs ol{list-style:none;padding:0}
.crumbs li{display:inline}
.crumbs li+li::before{content:" / ";color:#888}
</style>
<nav class="crumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="index.html">Home</a></li>
    <li><a href="recipes.html">Recipes</a></li>
    <li><a href="pancakes.html" aria-current="page">Pancakes</a></li>
  </ol>
</nav>

Footer navigation

A larger site often repeats its main pages in the footer. Giving this nav the label "Footer" lets screen reader users tell it apart from the main menu in the landmarks list. The links sit in a list so their number is announced.

<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="about.html">About us</a></li>
      <li><a href="privacy.html">Privacy policy</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <p><small>&copy; 2026 Sunny Bakery</small></p>
</footer>

Tip: Save nav for major link groups, and label each one if there are several.

Browser support

All modern browsers support nav, which came with HTML5, and expose it as a navigation landmark. Screen readers reach it through a shortcut key or a landmarks list. Only very old browsers, such as Internet Explorer 8 and earlier, failed to recognise it without a script.

Accessibility

With more than one nav landmark, give each an aria-label. Mark the link to the current page with aria-current="page". The W3C breadcrumb pattern (opens in a new tab) uses both attributes in a working example.

Common mistakes

Wrong

<nav>...</nav>
<nav>...</nav>

Right

<nav aria-label="Main">...</nav>
<nav aria-label="Breadcrumb">...</nav>

With several nav elements on a page, give each a distinct accessible name so users can tell which is which.

Frequently asked questions

Should I put a ul inside the nav tag?

Usually, yes. Links in <ul> and <li> let screen readers announce how many items the menu has, and the list gives you handy hooks for styling. The standard does not insist on it, though. A <nav> may hold plain links or paragraphs if that fits the content better. The ul element page shows how to get rid of the bullets afterwards.

Should every group of links be in a nav element?

No. The HTML standard reserves <nav> for major navigation blocks such as the main menu, a table of contents or pagination. A few links in a footer or in a paragraph can go without. Each extra nav adds a landmark, and too many of them make landmark navigation noisy for screen reader users.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.