<nav> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content, sectioning content, palpable content
Content model	Flow content
Tag omission	Neither the start nor end tag can be omitted
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLElement`

Syntax

<nav>
  <a href="...">Link</a>
</nav>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	`<nav>` has no attributes of its own — only the global attributes shared by every HTML element.

Common examples

The main site menu

The classic pattern: a <nav> landmark around an unordered list of links, laid out in a row with flexbox.

<nav aria-label="Main">
  <ul class="menu">
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

<style>
  .menu { display: flex; gap: 1rem; list-style: none; padding: 0; }
</style>

Breadcrumbs

A breadcrumb trail is navigation too. Label it so screen reader users know which navigation they’re in.

<nav aria-label="Breadcrumb">
  <a href="/">Home</a> ›
  <a href="/reference/">Reference</a> ›
  <span aria-current="page">&lt;nav&gt;</span>
</nav>

A table of contents

Long articles can include a <nav> of links to their own sections.

<nav aria-label="On this page">
  <ol>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#usage">Usage</a></li>
  </ol>
</nav>

A “Skip to content” link

Put this link first in the page so keyboard users can jump past the navigation. It stays hidden until it receives keyboard focus.

<a href="#main" class="skip-link">Skip to content</a>
<nav>…</nav>
<main id="main">…</main>

<style>
  .skip-link { position: absolute; left: -9999px; }
  .skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem 1rem; }
</style>

<nav> vs <ul>

They work together rather than compete. The <nav> element marks a region of the page as navigation — a landmark screen reader users can jump straight to. The <ul> inside it organises the links as a list, so assistive technology can announce how many links there are.

So a menu is usually <nav> on the outside and <ul> with <li> items on the inside. A short row of links can skip the list, but the <nav> wrapper is what tells everyone “this is a menu”.

	<nav>	<ul>
Purpose	Marks a navigation region	Groups items as a list
Landmark for screen readers	Yes	No
Typical use	Wraps the menu	Holds the menu links

Common mistakes to avoid

Wrapping every group of links in <nav>. Keep it for major navigation blocks; a few links in a paragraph or a footer’s legal links don’t need it.
Several navs with no labels. If a page has more than one <nav>, give each an aria-label (“Main”, “Breadcrumb”, “Footer”).
A mobile menu toggle made from a div. The ☰ button must be a real <button> with aria-expanded so keyboard and screen reader users can open it.
Hiding the menu from keyboard users. Menus that only open on mouse hover can’t be used with the Tab key.

Accessibility & SEO tips

Mark the current page’s link with aria-current="page" and style it, so everyone can see where they are.
Add a “Skip to content” link at the very top of the page so keyboard users can jump past the navigation.
Clear, consistent navigation links help search engines discover and understand your important pages.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.

Tutorials: How to add a link, How to make a dropdown menu, How to make a footer, How to make a navigation bar

Related tags

Frequently asked questions

Should every link group use <nav>?

No — use it only for major navigation blocks. A handful of footer links doesn't need to be wrapped in <nav>.

What's inside a typical <nav>?

Usually an unordered list (<ul>) of links (<a>), styled to look like a menu bar.

How do I make a hamburger menu?

Hide the links on small screens with a CSS media query and add a <button aria-expanded="false" aria-controls="menu">☰</button>. A few lines of JavaScript toggle a class that shows the menu and switch aria-expanded to true.

How many <nav> elements can a page have?

As many as needed — for example a main menu, breadcrumbs and a table of contents. Give each one an aria-label so screen reader users can tell them apart.

Should the logo go inside <nav>?

Usually not. The logo normally sits in the <header> next to the <nav>. It can be inside the nav if it's part of the menu, but keep the nav focused on the navigation links.

Does <nav> help SEO?

Indirectly. Search engines don't rank pages higher for using the tag, but clear, consistent navigation links help them discover your pages and understand how your site is organised.