Path // www.yourhtmlsource.com → Reference → <nav>

<nav>

The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. This includes menus, tables of contents, indexes, and any other group of links that represents a major navigation block. Not all groups of links need to be in a nav element; it's intended for major navigation sections.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

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

The element requires both opening and closing tags. A nav element can contain any flow content, typically unordered lists of links, but can also include headings, paragraphs, and other elements as needed. Multiple nav elements can exist on a single page.

Attributes

Global attributes - The <nav> element supports all global attributes such as id, class, style, lang, and dir.
aria-label - Recommended for accessibility when multiple nav elements exist, to differentiate between them (e.g., "Main navigation", "Footer navigation").

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

Examples

Main Site Navigation

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Breadcrumb Navigation

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li>Current Product</li>
  </ol>
</nav>

<nav aria-label="Table of contents">
  <h2>Contents</h2>
  <ol>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#chapter1">Chapter 1</a></li>
    <li><a href="#chapter2">Chapter 2</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ol>
</nav>

When to Use

Use the <nav> element when:

Creating the main site navigation menu
Building a table of contents for an article or page
Adding breadcrumb navigation
Creating a sidebar with navigation to related content
Building pagination controls for articles or search results
Adding secondary navigation in a footer

Do NOT use <nav> when:

You have a small group of links that isn't a major navigation block (just use regular links)
The links are part of the main content and not navigation (e.g., inline citations)
You're creating a list of resources at the end of an article (that's not navigation)

Important: Screen readers and other assistive technologies use the nav element to identify and provide shortcuts to navigation sections. Using appropriate aria-label attributes when you have multiple nav elements helps users distinguish between them.