<nav>

Since:		HTML5（2014）

The nav element is a semantic block element used to group navigation links for a website. It is commonly used for main navigation menus, breadcrumb trails, and tables of contents.

Syntax

<!-- Global navigation -->
<nav>
  <ul>
    <li><a href="/?lang=en">Home</a></li>
    <li><a href="/about.html?lang=en">About</a></li>
    <li><a href="/contact.html?lang=en">Contact</a></li>
  </ul>
</nav>

<!-- Use aria-label to distinguish multiple nav elements -->
<nav aria-label="Breadcrumb">
  <a href="/?lang=en">Home</a> > <a href="/products/?lang=en">Products</a> > Detail Page
</nav>

Main Attributes

Attribute	Description
aria-label	Communicates the purpose of the navigation to screen readers. When a page has multiple `nav` elements, this attribute distinguishes them — for example, "Global Navigation" vs. "Breadcrumb".
id / class	Used to apply CSS styles or manipulate the element with JavaScript.

Sample Code

sample_nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- Global navigation -->
  <nav aria-label="Global Navigation">
    <ul>
      <li><a href="/?lang=en">Home</a></li>
      <li><a href="/tutorial.html?lang=en">Tutorial</a></li>
      <li><a href="/dictionary.html?lang=en">Dictionary</a></li>
      <li><a href="/contact.html?lang=en">Contact</a></li>
    </ul>
  </nav>

  <!-- Breadcrumb -->
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <a href="/?lang=en">Home</a> >
    <a href="/dictionary.html?lang=en">Dictionary</a> >
    <span>HTML Dictionary</span>
  </nav>

  <!-- Table of contents -->
  <nav aria-label="Table of Contents">
    <ul>
      <li><a href="#section1">1. Introduction</a></li>
      <li><a href="#section2">2. Usage</a></li>
      <li><a href="#section3">3. Summary</a></li>
    </ul>
  </nav>

</body>
</html>

Result

The global navigation is displayed as a list. The breadcrumb trail appears as "Home > Dictionary > HTML Dictionary".

View sample page

Breadcrumb Navigation (with Structured Data)

Breadcrumb navigation is implemented with nav and ol. Adding schema.org structured data markup can cause breadcrumbs to appear in Google Search results.

<style>
  .breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
    font-size: 0.875rem;
  }
  /* Add separator (›) via CSS */
  .breadcrumb li + li::before {
    content: "›";
    margin-right: 4px;
    color: #999;
  }
  .breadcrumb a {
    color: #4a90e2;
    text-decoration: none;
  }
  .breadcrumb li:last-child { color: #666; }
</style>

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/?lang=en" itemprop="item"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/html/?lang=en" itemprop="item"><span itemprop="name">HTML Dictionary</span></a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">nav</span>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

Styling Navigation with CSS

A horizontal global navigation bar with CSS is the most common implementation pattern.

<style>
  /* Horizontal global navigation */
  .global-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #333;
  }
  .global-nav a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
  }
  .global-nav a:hover { background: #555; }

  /* Current page */
  .global-nav a[aria-current="page"] {
    background: #4a90e2;
    pointer-events: none;
  }

  /* Responsive: stack vertically below 768px */
  @media (max-width: 768px) {
    .global-nav ul { flex-direction: column; }
  }
</style>

<nav class="global-nav" aria-label="Global Navigation">
  <ul>
    <li><a href="/?lang=en">Home</a></li>
    <li><a href="/tutorial.html?lang=en">Tutorial</a></li>
    <li><a href="/dictionary.html?lang=en" aria-current="page">Dictionary</a></li>
    <li><a href="/contact.html?lang=en">Contact</a></li>
  </ul>
</nav>

Overview

The nav element is one of the semantic elements introduced in HTML5. Assistive technologies such as screen readers recognize nav elements on the page, allowing users to jump directly to navigation sections. It is an important element that contributes not only to visual design but also to improved accessibility.

You do not need to wrap every group of links in a nav element. Use it only for major navigation blocks. It is not required for minor link groups in footers, lists of external links, or single in-page links. A good rule of thumb is to ask: "Is this navigation important for understanding the site's structure?"

When a page has multiple nav elements, it is recommended to use the aria-label attribute to clarify the purpose of each one. This allows screen reader users to distinguish between "Global Navigation," "Breadcrumb," and "Table of Contents." It is common practice to structure links inside a navigation using ul and li elements for a proper list structure.