<nav>

<nav> represents a major block of navigation links, such as site navigation or a table of contents. It supplies a navigation landmark, while a supplies each link’s behavior.

Navigate within a document

These links point to real section IDs in the same example. Tab to a link and press Enter to navigate; no click-handler script is necessary.

<h1>Workshop guide</h1>
<nav aria-label="On this page">
  <ul>
    <li><a href="#prepare">Prepare</a></li>
    <li><a href="#practice">Practice</a></li>
  </ul>
</nav>
<section id="prepare">
  <h2>Prepare</h2>
  <p>Open a text editor.</p>
</section>
<section id="practice">
  <h2>Practice</h2>
  <p>Change one rule at a time.</p>
</section>

nav ul {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-left: 1rem;
}
a:focus-visible {
  outline: 3px solid #2563eb;
}

Labels and content

Navigation accepts flow content. A list is often useful but is not required. If several navigation regions have different purposes, name them with aria-label or a visible heading referenced by aria-labelledby, such as “Primary” and “On this page.” Avoid redundant names like “Navigation navigation.”

Not every group of links needs a nav landmark. A few utility links in a footer may be clear without it. Keep link text meaningful and use aria-current="page" for the current page where appropriate.

Links and controls

Use a button to open a menu and links to visit destinations. A visual horizontal navigation bar is not an ARIA menu; that role introduces a different keyboard pattern. Let ordinary links retain their normal Tab and Enter behavior.

Sources and browser support

MDN: nav describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.