<nav>

Designates thematic content sections of navigation links

✨ HTML5

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.

Tip: The <nav> tag is one of the new semantic elements in HTML5 that helps search engines and screen readers better understand your document structure.

Note: Use <nav> for major navigation blocks only, such as main menus, site navigation, breadcrumbs, or pagination. Not every group of links needs to be in a <nav> element.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example

Unavailable or blocked: fragment context “#intro”; fragment context “#methods”; fragment context “#results”; fragment context “#conclusion”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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:

Example

Approved-page light CSS-variable defaults are supplied: --text-primary. The snippet includes CSS inside its HTML.

<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

Accessibility Tip: When you have multiple <nav> elements, use aria-label or aria-labelledby to distinguish them for screen reader users.

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

Rule of Thumb: If it helps users navigate between pages or sections, use <nav>. If it's a list of commands or actions, use <menu>.

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

Interactive Example

Here's a live example of a styled navigation menu:

This navigation uses the <nav> element with semantic HTML structure and CSS styling.

Try in Code Playground

Default CSS Settings

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

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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