<nav>

The HTML <nav> element represents a section of navigation links. Navigation can link to sections of the current page, or, external links to other pages. It is a semantic element that helps screen readers and search engines understand the navigation structure of a page.

Not all links in a document require using the <nav> element, it is intended only for major navigation sections.

💡 Tip: Use <nav> to mark up major navigation blocks like main site navigation, breadcrumbs, or table of contents. Non-major links such as <footer> links (terms, delivery, copyright etc) do not require using <nav>.

Syntax

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

Common <nav> use cases

• Main site navigation menu.
• Breadcrumb navigation.
• Table of contents.

Basic usage

Here is a simple example of using a <nav> element for major page links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
  </ul>
</nav>

Output:

Block-level element

The <nav> element is a block-level element. This means it:

• Takes up the full available page width.
• Starts on a new line.
• Multiple block-level elements are stacked vertically.
• Can contain other block-level and inline elements.
• Typically styled with CSS for layout, responsiveness, and appearance.

Here is an example of three block-level elements, a <div> containing a nested <nav> and <p> element:

Multiple navigation sections

A web document can contain multiple <nav> elements. This example contains major site navigation links, along with internal links to navigate the current page:

<!-- Main site navigation -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/courses">Courses</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Table of contents navigation -->
<nav>
  <ol>
    <li><a href="#syntax">Syntax</a></li>
    <li><a href="#basic-usage">Basic usage</a></li>
  </ol>
</nav>

ARIA labels

When using multiple <nav> elements, add aria-label or aria-labelledby attributes to provide accessible names for navigation sections:

<nav aria-labelledby="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
  </ul>
</nav>

<!-- Table of contents navigation -->
<nav aria-labelledby="Table of contents">
  <ol>
    <li><a href="#syntax">Syntax</a></li>
    <li><a href="#basic-usage">Basic usage</a></li>
  </ol>
</nav>

Styling

The <nav> element is commonly styled with CSS for layout and appearance:

nav {
  background-color: ##faf5f5;
  padding: 1rem;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-right: 1rem;
}

nav a {
  color: #141212;
  text-decoration: none;
}

Mobile navigation

For responsive design, navigation often needs special handling on mobile devices:

/* Mobile first styling (vertical links) */
nav ul {
  display: flex;
  flex-direction: column;
}

/* Styles for devices over 768px (horizontal links) */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row;
  }
}

Conclusion

The <nav> element is used to create semantic and accessible navigation sections. Use it to mark up major navigation blocks to help both users and assistive technologies understand the navigation structure of your site.