Runnable HTML Docs: Nav

Q: Should links inside nav be in a list?

It is the common pattern and a good one: a of items lets screen readers announce how many links the menu has. Plain links directly inside are also valid, for example for two or three links in a row.

Q: Does every group of links need a nav element?

No. Use for major navigation blocks only. A few links in a paragraph or a short list of legal links in the footer do not need it, and too many nav landmarks make each one harder to find.

Q: How do I make a horizontal navigation bar?

Put the links in a inside , then give the list display: flex; list-style: none; padding: 0; and a gap. Flexbox lays the items out in a row.

Q: How do I show the current page in a navbar?

Add aria-current="page" to the link for the page the user is on, and style it with the selector [aria-current="page"]. Screen readers then announce it as the current page too.

Wrap your menu in <nav> and put the links in a list. Flexbox turns the list into a horizontal bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none and padding: 0 remove the bullets and the indent. display: block on each link lets its padding take up real space in the bar, so the whole padded box is the click target. Delete the display: flex line and the same menu becomes a vertical list, which is what a sidebar menu looks like.

<nav> itself looks like nothing. Its job is meaning: screen readers expose it as a navigation landmark, so a user can jump to the menu, or past it, with one key.

Mark the current page

Add aria-current="page" to the link for the page being shown. It tells screen readers "you are here", and it gives CSS a hook to highlight the link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Move aria-current="page" to another link and the highlight follows it. Styling the attribute instead of an .active class keeps the look and the accessibility in sync: you cannot have one without the other.

Several navs on one page: labels and breadcrumbs

A page can have a main menu, breadcrumbs and a table of contents, each in its own <nav>. Give each one an aria-label, so a screen reader announces "Breadcrumb navigation" instead of three identical "navigation" entries:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Breadcrumbs use an ordered list <ol> because the order matters. The slashes come from CSS ::before, so screen readers do not read "slash" between every item. The last item is the current page and is not a link.

A table of contents

A list of links to sections of the same page is navigation too. #id links jump to the element with that id; try them in the preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Here the label comes from a visible heading with aria-labelledby, which is better than aria-label when the heading is already on screen.

On narrow screens, menus usually hide behind a button. Use a real <button> with aria-expanded, and keep the links inside <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded tells a screen reader whether the menu is open, and the hidden attribute removes the list from both the screen and the accessibility tree while it is closed. On wide screens you would show the list with a media query and hide the button.

Common mistakes

Wrapping every link group in <nav>. Use it for the main menu, breadcrumbs, pagination and tables of contents. Inline links in text are not navigation blocks.
A menu button made from a <div>. It cannot be focused or pressed with the keyboard. Use <button>.
Several navs without labels. Add aria-label or aria-labelledby to each so they can be told apart.
Only coloring the current link. Add aria-current="page"; color alone is not announced and may not be visible to everyone.
Links with href="#" in production. They are fine in a demo, but real menu items need real URLs so they work when opened in a new tab. The links page covers how href values work.

Frequently Asked Questions

What is the nav tag in HTML?

<nav> is a semantic element that wraps a block of major navigation links, such as the site menu, a table of contents or breadcrumbs. Screen readers list it as a navigation landmark so users can jump straight to it.

Should links inside nav be in a list?

It is the common pattern and a good one: a <ul> of <li> items lets screen readers announce how many links the menu has. Plain links directly inside <nav> are also valid, for example for two or three links in a row.

Does every group of links need a nav element?

No. Use <nav> for major navigation blocks only. A few links in a paragraph or a short list of legal links in the footer do not need it, and too many nav landmarks make each one harder to find.

How do I make a horizontal navigation bar?

Put the links in a <ul> inside <nav>, then give the list display: flex; list-style: none; padding: 0; and a gap. Flexbox lays the items out in a row.

How do I show the current page in a navbar?

Add aria-current="page" to the link for the page the user is on, and style it with the selector [aria-current="page"]. Screen readers then announce it as the current page too.

Can a page have more than one nav?

Yes, for example a main menu, a breadcrumb trail and a table of contents. Give each one a different aria-label such as "Main" or "Breadcrumb" so screen reader users can tell them apart.

Related concepts