HTML <nav>
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>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
- Beginner Friendly.7 hours