Français

<nav>

Provide a navigation menu — not all navigations are equal

— 1 min read

  • HTML
  • accessibility
  • semantics
  • structure

<nav> — Navigation

The <nav> element identifies a block of navigation links. It is reserved for primary navigations: site menu, table of contents, breadcrumb. Not for every group of links.

When to use it

You want to mark your site's primary navigation, a secondary navigation (breadcrumb, pagination), or a table of contents. When you have multiple <nav> elements, distinguish them with aria-label.

What you gain

Accessibility: each <nav> creates a navigation landmark. Screen reader users can list all navigations and jump to the one they want.

Code example

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
 
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">Current article</li>
  </ol>
</nav>

Further reading