<nav> - Navigation Element

The `<nav>` Element

Landmark HTML5

The <nav> element represents a section of a page that contains navigation links, either to other pages or to parts within the current page. Not all groups of links need to be in a <nav> element—only sections that consist of major navigation blocks are appropriate for this element.

Quick Example

<header>
<h1>My Website</h1>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</header>

<main>
<h2>Welcome to our website</h2>
<p>Explore our content using the navigation above.</p>
</main>

Result

Interactive code playground requires JavaScript. Here's the code:

<header>
<h1>My Website</h1>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</header>

<main>
<h2>Welcome to our website</h2>
<p>Explore our content using the navigation above.</p>
</main>

Syntax

<nav>
  <!-- Navigation links -->
</nav>

Attributes

Element-Specific Attributes

The <nav> element has no element-specific attributes.

Global Attributes

This element supports all global attributes.

Common Use Cases

The most common use is for the main site navigation menu:

<header>
<h1>TechCompany</h1>
<nav aria-label="Primary">
  <ul style="list-style: none; display: flex; gap: 1.5rem; padding: 0;">
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/solutions">Solutions</a></li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>
</header>

Result

Interactive code playground requires JavaScript. Here's the code:

<header>
<h1>TechCompany</h1>
<nav aria-label="Primary">
  <ul style="list-style: none; display: flex; gap: 1.5rem; padding: 0;">
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/solutions">Solutions</a></li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>
</header>

A navigation menu with dropdown submenus:

<nav aria-label="Main">
<ul style="list-style: none; padding: 0; margin: 0;">
  <li style="display: inline-block; position: relative;">
    <a href="/products">Products</a>
    <ul style="position: absolute; background: white; border: 1px solid #ccc; list-style: none; padding: 0.5rem; display: none;">
      <li><a href="/products/web">Web Apps</a></li>
      <li><a href="/products/mobile">Mobile Apps</a></li>
      <li><a href="/products/desktop">Desktop Apps</a></li>
    </ul>
  </li>
  <li style="display: inline-block; margin-left: 1rem;">
    <a href="/services">Services</a>
  </li>
  <li style="display: inline-block; margin-left: 1rem;">
    <a href="/contact">Contact</a>
  </li>
</ul>
</nav>

<style>
nav li:hover > ul {
  display: block;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<nav aria-label="Main">
<ul style="list-style: none; padding: 0; margin: 0;">
  <li style="display: inline-block; position: relative;">
    <a href="/products">Products</a>
    <ul style="position: absolute; background: white; border: 1px solid #ccc; list-style: none; padding: 0.5rem; display: none;">
      <li><a href="/products/web">Web Apps</a></li>
      <li><a href="/products/mobile">Mobile Apps</a></li>
      <li><a href="/products/desktop">Desktop Apps</a></li>
    </ul>
  </li>
  <li style="display: inline-block; margin-left: 1rem;">
    <a href="/services">Services</a>
  </li>
  <li style="display: inline-block; margin-left: 1rem;">
    <a href="/contact">Contact</a>
  </li>
</ul>
</nav>

<style>
nav li:hover > ul {
  display: block;
}
</style>

Breadcrumbs showing the user’s location in the site hierarchy:

<nav aria-label="Breadcrumb">
<ol style="list-style: none; display: flex; gap: 0.5rem; padding: 0;">
  <li>
    <a href="/">Home</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li>
    <a href="/products">Products</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li>
    <a href="/products/laptops">Laptops</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li aria-current="page">
    Gaming Laptops
  </li>
</ol>
</nav>

<main>
<h1>Gaming Laptops</h1>
<p>Explore our selection of high-performance gaming laptops.</p>
</main>

Result

Interactive code playground requires JavaScript. Here's the code:

<nav aria-label="Breadcrumb">
<ol style="list-style: none; display: flex; gap: 0.5rem; padding: 0;">
  <li>
    <a href="/">Home</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li>
    <a href="/products">Products</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li>
    <a href="/products/laptops">Laptops</a>
    <span aria-hidden="true"> / </span>
  </li>
  <li aria-current="page">
    Gaming Laptops
  </li>
</ol>
</nav>

<main>
<h1>Gaming Laptops</h1>
<p>Explore our selection of high-performance gaming laptops.</p>
</main>

Navigation for jumping to different sections of a long document:

<article>
<header>
  <h1>Complete Guide to Web Development</h1>

  <nav aria-label="Table of contents">
    <h2>Contents</h2>
    <ol>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#html">HTML Basics</a></li>
      <li><a href="#css">CSS Styling</a></li>
      <li><a href="#javascript">JavaScript Fundamentals</a></li>
      <li><a href="#conclusion">Conclusion</a></li>
    </ol>
  </nav>
</header>

<section id="introduction">
  <h2>Introduction</h2>
  <p>Welcome to web development...</p>
</section>

<section id="html">
  <h2>HTML Basics</h2>
  <p>HTML is the foundation...</p>
</section>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<header>
  <h1>Complete Guide to Web Development</h1>

  <nav aria-label="Table of contents">
    <h2>Contents</h2>
    <ol>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#html">HTML Basics</a></li>
      <li><a href="#css">CSS Styling</a></li>
      <li><a href="#javascript">JavaScript Fundamentals</a></li>
      <li><a href="#conclusion">Conclusion</a></li>
    </ol>
  </nav>
</header>

<section id="introduction">
  <h2>Introduction</h2>
  <p>Welcome to web development...</p>
</section>

<section id="html">
  <h2>HTML Basics</h2>
  <p>HTML is the foundation...</p>
</section>
</article>

Secondary navigation in the footer:

<footer style="background: #333; color: white; padding: 2rem;">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
  <nav aria-label="Company">
    <h3>Company</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/about" style="color: white;">About Us</a></li>
      <li><a href="/team" style="color: white;">Our Team</a></li>
      <li><a href="/careers" style="color: white;">Careers</a></li>
      <li><a href="/press" style="color: white;">Press</a></li>
    </ul>
  </nav>

  <nav aria-label="Resources">
    <h3>Resources</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/blog" style="color: white;">Blog</a></li>
      <li><a href="/docs" style="color: white;">Documentation</a></li>
      <li><a href="/support" style="color: white;">Support</a></li>
      <li><a href="/community" style="color: white;">Community</a></li>
    </ul>
  </nav>

  <nav aria-label="Legal">
    <h3>Legal</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/privacy" style="color: white;">Privacy Policy</a></li>
      <li><a href="/terms" style="color: white;">Terms of Service</a></li>
      <li><a href="/cookies" style="color: white;">Cookie Policy</a></li>
    </ul>
  </nav>
</div>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<footer style="background: #333; color: white; padding: 2rem;">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
  <nav aria-label="Company">
    <h3>Company</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/about" style="color: white;">About Us</a></li>
      <li><a href="/team" style="color: white;">Our Team</a></li>
      <li><a href="/careers" style="color: white;">Careers</a></li>
      <li><a href="/press" style="color: white;">Press</a></li>
    </ul>
  </nav>

  <nav aria-label="Resources">
    <h3>Resources</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/blog" style="color: white;">Blog</a></li>
      <li><a href="/docs" style="color: white;">Documentation</a></li>
      <li><a href="/support" style="color: white;">Support</a></li>
      <li><a href="/community" style="color: white;">Community</a></li>
    </ul>
  </nav>

  <nav aria-label="Legal">
    <h3>Legal</h3>
    <ul style="list-style: none; padding: 0;">
      <li><a href="/privacy" style="color: white;">Privacy Policy</a></li>
      <li><a href="/terms" style="color: white;">Terms of Service</a></li>
      <li><a href="/cookies" style="color: white;">Cookie Policy</a></li>
    </ul>
  </nav>
</div>
</footer>

Pagination Navigation

Navigation for multi-page content:

<nav aria-label="Pagination">
<ul style="list-style: none; display: flex; gap: 0.5rem; padding: 0;">
  <li>
    <a href="/page/1" aria-label="Go to first page">First</a>
  </li>
  <li>
    <a href="/page/2" aria-label="Go to previous page">Previous</a>
  </li>
  <li>
    <a href="/page/1">1</a>
  </li>
  <li>
    <a href="/page/2">2</a>
  </li>
  <li aria-current="page">
    <span style="font-weight: bold;">3</span>
  </li>
  <li>
    <a href="/page/4">4</a>
  </li>
  <li>
    <a href="/page/5">5</a>
  </li>
  <li>
    <a href="/page/4" aria-label="Go to next page">Next</a>
  </li>
  <li>
    <a href="/page/10" aria-label="Go to last page">Last</a>
  </li>
</ul>
</nav>

Result

Interactive code playground requires JavaScript. Here's the code:

<nav aria-label="Pagination">
<ul style="list-style: none; display: flex; gap: 0.5rem; padding: 0;">
  <li>
    <a href="/page/1" aria-label="Go to first page">First</a>
  </li>
  <li>
    <a href="/page/2" aria-label="Go to previous page">Previous</a>
  </li>
  <li>
    <a href="/page/1">1</a>
  </li>
  <li>
    <a href="/page/2">2</a>
  </li>
  <li aria-current="page">
    <span style="font-weight: bold;">3</span>
  </li>
  <li>
    <a href="/page/4">4</a>
  </li>
  <li>
    <a href="/page/5">5</a>
  </li>
  <li>
    <a href="/page/4" aria-label="Go to next page">Next</a>
  </li>
  <li>
    <a href="/page/10" aria-label="Go to last page">Last</a>
  </li>
</ul>
</nav>

Responsive navigation with hamburger menu:

<header>
<h1>MySite</h1>

<button id="menu-toggle" aria-expanded="false" aria-controls="main-menu">
  Menu ☰
</button>

<nav id="main-menu" hidden>
  <ul style="list-style: none; padding: 1rem;">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</header>

<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('main-menu');

toggle.addEventListener('click', () => {
  const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', !isExpanded);
  menu.hidden = isExpanded;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<header>
<h1>MySite</h1>

<button id="menu-toggle" aria-expanded="false" aria-controls="main-menu">
  Menu ☰
</button>

<nav id="main-menu" hidden>
  <ul style="list-style: none; padding: 1rem;">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</header>

<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('main-menu');

toggle.addEventListener('click', () => {
  const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', !isExpanded);
  menu.hidden = isExpanded;
});
</script>

Best Practices

When you have multiple <nav> elements, use aria-label or aria-labelledby to distinguish them:

<!-- Good: Labeled navigation -->
<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

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

<!-- Or use aria-labelledby -->
<nav aria-labelledby="primary-nav-heading">
  <h2 id="primary-nav-heading">Main Menu</h2>
  <ul>...</ul>
</nav>

Don’t Overuse Nav

Not every group of links needs to be in a <nav> element:

<!-- Good: Major navigation blocks only -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
</nav>

<main>
  <p>Visit our <a href="/store">store</a> or <a href="/support">support</a> pages.</p>
  <!-- Inline links don't need <nav> -->
</main>

<footer>
  <p>&copy; 2025 | <a href="/privacy">Privacy</a> | <a href="/terms">Terms</a></p>
  <!-- Simple footer links may not need <nav> -->
</footer>

<!-- Use <nav> for substantial link groups -->
<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/careers">Careers</a></li>
      <li><a href="/press">Press</a></li>
      <li><a href="/privacy">Privacy</a></li>
    </ul>
  </nav>
</footer>

Structure navigation links with lists for better accessibility:

<!-- Good: List structure -->
<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Acceptable but less semantic -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Indicate Current Page

Mark the current page in navigation:

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

Accessibility

The <nav> element creates a navigation landmark that assistive technologies can identify and navigate to:

<!-- Creates a navigation landmark -->
<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Screen reader users can jump between navigation landmarks using keyboard shortcuts:

JAWS: ; key
NVDA: D key
VoiceOver: VO + U, then use arrow keys

Provide skip links for keyboard users to bypass navigation:

<body>
<a href="#main-content" class="skip-link" style="position: absolute; top: -40px; background: #000; color: #fff; padding: 8px;">
  Skip to main content
</a>

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main id="main-content">
  <h1>Main Content</h1>
  <p>Keyboard users can skip directly to this content.</p>
</main>
</body>

<style>
.skip-link:focus {
  top: 0;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<body>
<a href="#main-content" class="skip-link" style="position: absolute; top: -40px; background: #000; color: #fff; padding: 8px;">
  Skip to main content
</a>

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main id="main-content">
  <h1>Main Content</h1>
  <p>Keyboard users can skip directly to this content.</p>
</main>
</body>

<style>
.skip-link:focus {
  top: 0;
}
</style>

Ensure all navigation items are keyboard accessible:

<nav aria-label="Primary">
  <button aria-expanded="false" aria-controls="menu">
    Menu
  </button>
  <ul id="menu" hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<script>
  // Ensure Enter and Space keys work on buttons
  // Ensure Escape closes menus
  // Ensure Tab navigates through items
</script>

ARIA Current

Use aria-current to indicate the current page or location:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops" aria-current="page">Laptops</a></li>
  </ol>
</nav>

Values for aria-current:

page - Current page
step - Current step in a process
location - Current location in a hierarchy
date - Current date in a calendar
time - Current time
true - Current item in a set

Browser Support

Browser	Version
Chrome	5+
Firefox	4+
Safari	5+
Edge	All versions
IE	9+

Often contains the primary navigation. Learn more →

Anchor elements create navigation links. Learn more →

Similar but for toolbars and context menus. Learn more →

Common Mistakes

Using Nav for All Links

<!-- Wrong: Nav for every group of links -->
<p>Check out our <nav><a href="/blog">blog</a></nav> for updates.</p>

<footer>
  <nav>
    <a href="/privacy">Privacy</a>
  </nav>
</footer>

<!-- Correct: Nav for major navigation blocks -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

<p>Check out our <a href="/blog">blog</a> for updates.</p>

<footer>
  <p><a href="/privacy">Privacy</a> | <a href="/terms">Terms</a></p>
</footer>

Missing Labels for Multiple Navs

<!-- Wrong: Multiple navs without labels -->
<nav>
  <a href="/">Home</a>
</nav>
<nav>
  <a href="/privacy">Privacy</a>
</nav>

<!-- Correct: Label each nav -->
<nav aria-label="Primary">
  <a href="/">Home</a>
</nav>
<nav aria-label="Footer">
  <a href="/privacy">Privacy</a>
</nav>

Not Indicating Current Page

<!-- Incomplete: No current page indicator -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<!-- Better: Mark current page -->
<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
</nav>

<nav> - Navigation Element

The `<nav>` Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Primary Site Navigation

Table of Contents

Footer Navigation

Mobile Navigation Menu

Best Practices

Label Multiple Navigation Landmarks

Don’t Overuse Nav

Use Lists for Navigation

Indicate Current Page

Accessibility

Navigation Landmark

Skip Navigation Links

Keyboard Navigation

ARIA Current

Browser Support

Common Mistakes

Using Nav for All Links

Missing Labels for Multiple Navs

Not Indicating Current Page

Specifications

<nav> - Navigation Element

The <nav> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Primary Site Navigation

Dropdown Navigation Menu

Breadcrumb Navigation

Table of Contents

Footer Navigation

Pagination Navigation

Mobile Navigation Menu

Best Practices

Label Multiple Navigation Landmarks

Don’t Overuse Nav

Use Lists for Navigation

Indicate Current Page

Accessibility

Navigation Landmark

Skip Navigation Links

Keyboard Navigation

ARIA Current

Browser Support

Related Elements

Common Mistakes

Using Nav for All Links

Missing Labels for Multiple Navs

Not Indicating Current Page

Specifications

The `<nav>` Element