<nav>

BrandonDusch's avatar'
BrandonDusch
BrandonDusch's avatar'
BrandonDusch
Published Aug 24, 2021Updated Jul 1, 2022
Contribute to Docs

The <nav> element is used to define a list of navigation links such as menus and tables of contents.

Syntax

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>

It is important to note that <nav> can be used inside of the <header> element, but it can also be used on its own.

Example

Take a look at the navigation bar at the top of this Codecademy Docs page. It should look something like this in semantic HTML:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <header>
      <!-- The Codecademy Docs nav bar -->
      <nav>
        <ul>
          <li><a href="https://www.codecademy.com/learn">My Home</a></li>
          <li><a href="https://www.codecademy.com/catalog">Catalog</a></li>
          <li><span title="Resources" class="dropdown">Resources</span></li>
          <li><span title="Community" class="dropdown">Community</span></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

All contributors

Looking to contribute?

Learn HTML on Codecademy

Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification
Beginner Friendly
131 Lessons
Free course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
Beginner Friendly
6 Lessons