<nav>

Definition and Usage

The <nav> element establishes a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Attributes

The <nav> tag supports the Global Attributes in HTML.

The <nav> tag also supports the Event Attributes in HTML.

Examples

Basic Main Navigation

Create a primary navigation menu for your website:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Breadcrumb Navigation

Use nav for breadcrumb trails:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/products/electronics/">Electronics</a></li>
    <li>Laptops</li>
  </ol>
</nav>

Sidebar Navigation

Create a sidebar navigation menu:

<aside>
  <nav aria-label="Sidebar navigation">
    <h2>Categories</h2>
    <ul>
      <li><a href="/category/html">HTML Tutorials</a></li>
      <li><a href="/category/css">CSS Tutorials</a></li>
      <li><a href="/category/javascript">JavaScript Tutorials</a></li>
      <li><a href="/category/responsive">Responsive Design</a></li>
    </ul>
  </nav>
</aside>

Footer Navigation

Add navigation links in the footer:

<footer>
  <nav aria-label="Footer navigation">
    <ul>
      <li><a href="/privacy.html">Privacy Policy</a></li>
      <li><a href="/terms.html">Terms of Service</a></li>
      <li><a href="/sitemap.html">Sitemap</a></li>
    </ul>
  </nav>
  <p>© 2025 Your Company. All rights reserved.</p>
</footer>

Multiple Navigation Elements

You can have multiple nav elements on a page:

<header>
  <nav aria-label="Primary navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <nav aria-label="Table of contents">
      <h2>Contents</h2>
      <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#methods">Methods</a></li>
        <li><a href="#results">Results</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
      </ul>
    </nav>
  </article>
</main>

Horizontal Navigation with CSS

Style navigation as a horizontal menu:

<style>
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    background-color: var(--text-primary);
  }

  nav ul li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  nav ul li a:hover {
    background-color: #555;
  }

  nav ul li a.active {
    background-color: #745af2;
  }
</style>

<nav>
  <ul>
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li><a href="/blog.html">Blog</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Accessibility Features

• ARIA Labels: Use aria-label to describe the navigation's purpose when you have multiple nav elements
• Landmark Role: The <nav> element has an implicit ARIA role of "navigation"
• Skip Links: Provide skip navigation links for keyboard users to jump past navigation
• Screen Readers: Screen readers announce navigation landmarks, helping users navigate your site
• Keyboard Navigation: Ensure all links are keyboard accessible

When to Use <nav>

Use the <nav> element for:

• Primary Site Navigation: Main menu with links to major sections
• Breadcrumb Trails: Hierarchical navigation showing current location
• Pagination: Previous/next links for multi-page content
• Table of Contents: Navigation within long articles or documents
• Category Menus: Sidebar or secondary navigation for filtering/browsing

Do NOT use <nav> for:

• Social media links in footer (use regular links)
• Tags or keywords in blog posts
• Single promotional links
• Small groups of utility links (unless they're major navigation)

<nav> vs <menu>

• <nav>: Used for major navigation blocks (site navigation, breadcrumbs, pagination)
• <menu>: Used for toolbar commands, context menus, or lists of commands/actions

Best Practices

• Use for major navigation blocks only - Not every group of links needs a <nav>
• Add ARIA labels - Use aria-label when you have multiple nav elements
• Use semantic structure - Nest lists (<ul>, <ol>) inside nav for better semantics
• Keep it consistent - Use the same navigation structure across your site
• Make it accessible - Ensure keyboard navigation and screen reader support
• Include skip links - Allow users to skip over navigation content
• Indicate current page - Use aria-current="page" or class="active" for current location
• Test with screen readers - Verify that navigation landmarks are announced correctly

Try it Yourself

Default CSS Settings

Most browsers will display the <nav> element with the following default values:

nav {
  display: block;
}

Related Tags

• <ul>

  Defines an unordered list

• <li>

  Defines a list item

• <a>

  Defines a hyperlink

• <header>

  Defines a header for a document

• <footer>

  Defines a footer for a document

• <menu>

  Defines a list of commands