Free tools Windows power users keep installed
One-click scans. No signup required.
The HTML <nav> element marks a meaningful group of links used to navigate a website or a page. It also exposes that group as a navigation landmark to assistive technologies. Use it for major navigation areas—such as a site menu, breadcrumbs, or a table of contents—not for every incidental collection of links.
What does the HTML <nav> element do?
<nav> is a semantic section for navigation links. The links may lead to other documents or to locations within the current document. Typical examples include a site menu, breadcrumbs, an index, or a table of contents. MDN describes the element as representing a section whose purpose is to provide navigation links.
Unlike a generic <div>, a <nav> communicates the section’s purpose in the document structure. Browsers and assistive technologies can expose it as a navigation landmark, giving users a way to find and move among important navigation regions.
A basic navigation menu
<nav aria-label="Primary">
<ul>
<li><a href="/products">Products</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>The list groups related links, while the link text describes each destination. Links remain keyboard-operable through the browser’s normal HTML behavior.
#1 Best Overall
When should you use <nav> instead of <div>?
Choose <nav> when a region is a distinct, useful set of navigation links that users may want to find as a landmark. Use a <div> for layout or grouping that does not have that navigation purpose. Wrapping every cluster of links in <nav> adds landmark noise rather than useful structure.
- Good fit: primary or major site navigation, breadcrumbs, a table of contents, or an index.
- Usually not a fit: a few incidental links embedded in ordinary text or a group of links that does not function as a navigation section.
Examples of useful <nav> regions
Primary navigation
Use a navigation region for the site’s main destinations. If the page has other navigation landmarks, give this one a clear name such as “Primary.”
Breadcrumbs
A breadcrumb trail helps users understand their location and navigate to higher levels. Because it is a distinct navigation region, it can be marked up as a <nav> and named “Breadcrumb” or “Breadcrumbs.”
Table of contents
A table of contents links to sections within the current document, which is also navigation. A name such as “On this page” helps distinguish it from site-wide navigation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Can a page have more than one <nav>?
Yes. A page can contain multiple navigation sections when each serves a distinct purpose—for example, one for the site’s main destinations and another for the page’s contents. The distinction should be apparent to users, including people navigating by landmarks.
When a page contains more than one navigation landmark, provide understandable names so assistive-technology users can tell them apart. The W3C H101 technique recommends labeling repeated landmarks of the same type. The MDN guidance for the navigation role also recommends consistent labels when repeated landmarks have identical content.
Name a region with a visible heading
If a navigation section already has a visible heading, use aria-labelledby to associate that heading with the landmark:
<h2 id="contents-heading">On this page</h2>
<nav aria-labelledby="contents-heading">
<ul>
<li><a href="#meaning">Meaning</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>Name a region with aria-label
When there is no visible heading to reference, provide a concise purpose-specific name directly:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Best Value
<nav aria-label="On this page">
<ul>
<li><a href="#meaning">Meaning</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>Use names that distinguish regions with different purposes, such as “Primary” and “On this page.” If repeated landmarks contain the same content, use consistent labels for those equivalent regions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Should you add role="navigation" to <nav>?
Normally, no. The native <nav> element already has navigation landmark semantics. Adding role="navigation" to the same element duplicates information rather than adding a needed meaning. The WAI-ARIA Authoring Practices navigation landmark example demonstrates using <nav> to define the landmark.
Quick implementation checklist
- Use
<nav>for a meaningful navigation section, not a generic link cluster. - Give separate navigation regions clear names when users need to distinguish them.
- Use
aria-labelledbyfor a visible heading oraria-labelwhen there is no heading to reference. - Keep link text meaningful and use ordinary links so keyboard navigation works as expected.
- Do not add a redundant
role="navigation"to native<nav>.
MDN lists the element as widely available across browsers, with availability dating to July 2015. See its browser compatibility information.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
