Codectionary / Developer documentation / HTML

<nav>

The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.

Syntax

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Examples

Primary Navigation

A site's main navigation menu.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Breadcrumb Navigation

Using nav for breadcrumb trails, with an aria-label to distinguish it from the main menu.

<nav aria-label="Breadcrumb">
  <ol style="display: flex; gap: 8px; list-style: none; padding: 0;">
    <li><a href="/">Home</a></li>
    <li>/</li>
    <li><a href="/docs">Docs</a></li>
    <li>/</li>
    <li>HTML</li>
  </ol>
</nav>

Styled Horizontal Nav

A horizontally laid out navigation bar.

<nav style="display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px solid #e5e7eb;">
  <a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Home</a>
  <a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Docs</a>
  <a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Blog</a>
</nav>

Best practices

  • Reserve <nav> for major navigation blocks, not every list of links on a page
  • Use aria-label to distinguish multiple <nav> elements on the same page, like "Main" vs. "Breadcrumb"
  • Wrap navigation links in a list (<ul>/<li>) for proper semantic structure
  • Avoid nesting a <nav> inside another <nav>

Browser compatibility

Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.

<nav>

Desktop

Chrome
Supported
From 5
Firefox
Supported
From 4
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
From 11.1

Mobile

Safari on iOS
Supported
From 4.2
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 4
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 5

Firefox

  • From 4

Safari

  • From 5

Edge

  • From 12

Opera

  • From 11.1

Safari on iOS

  • From 4.2

Chrome for Android

  • From 18

Firefox for Android

  • From 4

Samsung Internet

  • From 1.0

MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.

HTML Living Standard

Specifications & further reading