Links & Navigation

<nav> Navigation

Wraps the primary navigation links of a site or section.

1Marking Up Navigation

<nav> tells screen readers and search engines "this group of links is navigation". Use it for primary menus, breadcrumbs, and pagination — not every group of links.

Example Code

css

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

2Put the element in context

Nav identifies a significant navigation region. A website can have more than one, such as primary navigation and breadcrumbs, so distinct accessible labels can help identify their purposes. A small group of incidental links does not always need its own nav region.

3Practice with a small page

Build primary navigation as a list of real links and give the region a clear label. Add a separately labeled breadcrumb trail. Check the current-page indication and reading order after the primary links wrap on a phone.

Finished reading?

Mark this topic as complete to track progress.

<a> Anchor Links

Next Topic

<img> Images