<nav>

Published Aug 24, 2021Updated Jul 1, 2022

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>