Navigation Menus (<nav>) — HTML

Navigation Menus with <nav>

<nav> is a semantic sectioning element for a block of navigation links — it tells browsers, search engines, and assistive technology "this is a set of links for getting around the site," which lets screen readers offer a shortcut to jump straight to it.

<nav> Semantics

Not every group of links needs <nav> — it's meant for major navigation blocks: the primary site menu, a table of contents, or breadcrumbs. A handful of inline links inside an article's body don't need to be wrapped in <nav>.

nav-basic.html

HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/tutorials">Tutorials</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Structuring a Nav with ul/li/a

The standard pattern nests an unordered list (order usually doesn't matter for a menu) inside <nav>, with each item holding one link. This gives screen readers a count ("navigation, list, 4 items") and gives CSS clean hooks for a horizontal bar, hamburger menu, or dropdown.

nav-structure.html

HTML

<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/pricing">Pricing</a></li>
  </ul>
</nav>

aria-current for the active page

aria-current="page" on the link matching the current page tells assistive technology which nav item is "you are here" — a nice, low-effort accessibility win most sites skip.

Multiple <nav> Elements Per Page

A page can have more than one <nav> — a main menu, breadcrumbs, pagination controls, and a footer sitemap are all legitimate uses.

multiple-nav.html

HTML

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

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">How to Nest Lists</li>
  </ol>
</nav>

<main>
  <!-- article content -->
</main>

<nav aria-label="Pagination">
  <a href="/blog?page=1">Previous</a>
  <a href="/blog?page=3">Next</a>
</nav>

<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/privacy">Privacy</a></li>
      <li><a href="/terms">Terms</a></li>
    </ul>
  </nav>
</footer>

aria-label to Distinguish Multiple navs

When a page has more than one <nav>, screen readers announce them all simply as "navigation" unless you distinguish them. aria-label (or aria-labelledby, pointing at a visible heading) gives each one a distinct, announced name.

aria-label-nav.html

HTML

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

Without aria-label

A screen reader user navigating by landmark would hear "navigation, navigation, navigation" with no way to tell them apart. A short, unique aria-label on each fixes that instantly.

Quick Reference

Nav type	Typical placement	aria-label example
Primary menu	Inside `<header>`	"Main"
Breadcrumbs	Top of `<main>` or article	"Breadcrumb"
Pagination	Bottom of a list/article page	"Pagination"
Footer links	Inside `<footer>`	"Footer"

Reserve <nav> for genuinely significant navigation blocks — not every link cluster needs it.
Always add aria-label when a page has more than one <nav> element.
Build the menu items with <ul>/<li>/<a> for consistent semantics, then style with CSS.