The <nav> element represents a section of navigation links. It's used for major navigation blocks like main site menus, table of contents, or page indexes. Using nav helps screen readers and search engines identify navigation areas on your page.
Basic Navigation
The most common use of nav is for the main site navigation menu:
basic-nav.html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>When to Use Nav
Use <nav> for:
- Main site navigation
- Table of contents
- Breadcrumb navigation
- Pagination
Don't use nav for:
- Social media links (use footer instead)
- Tag clouds
- Single links that aren't part of a navigation section
Multiple Nav Sections
You can have multiple nav elements on a page. Use aria-label to differentiate them:
multiple-nav.html
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<!-- Main navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<!-- Table of contents -->
<nav aria-label="Table of contents">
<h2>Contents</h2>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<p>Article content...</p>
</article>
</main>
<footer>
<!-- Footer navigation -->
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Common Navigation Patterns
Horizontal Menu
horizontal-menu.html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<style>
nav ul {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
}
nav a {
text-decoration: none;
color: #333;
padding: 8px 16px;
}
nav a:hover {
background-color: #f0f0f0;
border-radius: 4px;
}
</style>Breadcrumb Navigation
breadcrumb.html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/electronics">Electronics</a></li>
<li aria-current="page">Laptops</li>
</ol>
</nav>
<style>
nav[aria-label="Breadcrumb"] ol {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
}
nav[aria-label="Breadcrumb"] li::after {
content: " / ";
margin-left: 8px;
}
nav[aria-label="Breadcrumb"] li:last-child::after {
content: "";
}
</style>Dropdown Menu
dropdown-menu.html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li>
<a href="/products">Products</a>
<ul>
<li><a href="/products/software">Software</a></li>
<li><a href="/products/hardware">Hardware</a></li>
<li><a href="/products/services">Services</a></li>
</ul>
</li>
<li><a href="/about">About</a></li>
</ul>
</nav>Best Practices
Use Lists for Navigation
use-lists.html
<!-- Good: Using lists -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<!-- Acceptable: Simple text links -->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>Label Multiple Navs
label-navs.html
<!-- Good: Clear labels for screen readers -->
<nav aria-label="Main navigation">
<!-- main menu -->
</nav>
<nav aria-label="Secondary navigation">
<!-- secondary menu -->
</nav>
<!-- Also good: Using aria-labelledby -->
<h2 id="footer-nav-heading">Site Links</h2>
<nav aria-labelledby="footer-nav-heading">
<!-- footer links -->
</nav>Add Skip Links
Help keyboard users skip navigation:
skip-links.html
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>
<!-- navigation links -->
</nav>
<main id="main-content">
<!-- page content -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>Common Mistakes
mistakes.html
<!-- Bad: Using nav for everything -->
<nav>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</nav>
<!-- Better: Social links in footer -->
<footer>
<p>Follow us:</p>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</footer>
<!-- Bad: Wrapping single links -->
<nav>
<a href="/login">Login</a>
</nav>
<!-- Better: Single link doesn't need nav -->
<a href="/login">Login</a>Key Takeaways
- Use
<nav>for major navigation sections - Helps screen readers identify navigation areas
- Use lists (ul/ol) inside nav for better structure
- You can have multiple nav elements on a page
- Use
aria-labelto distinguish multiple navs - Don't use nav for social links or single links
- Consider adding skip links for accessibility
What's Next?
Now that you understand the nav element, the next lesson will cover<main> and <article> elements, which help structure the primary content of your pages.