Dokumentacja HTML z przykładami: Nav

Q: Czy linki w nav powinny być w liście?

To częsty i dobry wzorzec: z elementami pozwala czytnikom ekranu podać, ile linków ma menu. Zwykłe linki bezpośrednio w też są poprawne, na przykład przy dwóch albo trzech linkach w rzędzie.

Q: Czy każda grupa linków potrzebuje elementu nav?

Nie. Używaj tylko do głównych bloków nawigacji. Kilka linków w akapicie albo krótka lista linków prawnych w stopce go nie potrzebują, a zbyt wiele punktów orientacyjnych nawigacji utrudnia znalezienie każdego z nich.

Q: Jak zrobić poziomy pasek nawigacji?

Umieść linki w wewnątrz , a potem nadaj liście display: flex; list-style: none; padding: 0; i gap. Flexbox ułoży elementy w rzędzie.

Q: Jak pokazać bieżącą stronę w menu?

Dodaj aria-current="page" do linku strony, na której jest użytkownik, i ostyluj go selektorem [aria-current="page"]. Czytniki ekranu też ogłoszą go wtedy jako bieżącą stronę.

Pasek nawigacji z nav

Obejmij menu elementem <nav> i umieść linki w liście. Flexbox zamienia listę w poziomy pasek:

<!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 i padding: 0 usuwają punktory i wcięcie. display: block na każdym linku sprawia, że jego padding zajmuje realne miejsce w pasku, więc celem kliknięcia jest całe pole z paddingiem. Usuń linię display: flex, a to samo menu stanie się pionową listą, tak jak wygląda menu w pasku bocznym.

Sam <nav> niczego nie zmienia w wyglądzie. Jego zadaniem jest znaczenie: czytniki ekranu pokazują go jako punkt orientacyjny nawigacji, więc użytkownik może jednym klawiszem przeskoczyć do menu albo je pominąć.

Oznaczanie bieżącej strony

Dodaj aria-current="page" do linku strony, która jest wyświetlana. Mówi czytnikom ekranu "tu jesteś" i daje CSS punkt zaczepienia do wyróżnienia linku:

<!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>

Przenieś aria-current="page" na inny link, a wyróżnienie przejdzie za nim. Stylowanie atrybutu zamiast klasy .active utrzymuje wygląd i dostępność w zgodzie: nie da się mieć jednego bez drugiego.

Kilka nav na jednej stronie: etykiety i okruszki

Strona może mieć menu główne, okruszki i spis treści, każde w osobnym <nav>. Nadaj każdemu aria-label, żeby czytnik ekranu ogłaszał "Breadcrumb navigation" zamiast trzech identycznych pozycji "navigation":

<!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>

Okruszki używają listy numerowanej <ol>, bo kolejność ma znaczenie. Ukośniki pochodzą z CSS ::before, więc czytniki ekranu nie czytają "slash" między elementami. Ostatni element to bieżąca strona i nie jest linkiem.

Spis treści

Lista linków do sekcji tej samej strony to też nawigacja. Linki #id przeskakują do elementu o tym id; wypróbuj je w podglądzie:

<!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>

Tutaj etykieta pochodzi z widocznego nagłówka przez aria-labelledby, co jest lepsze niż aria-label, gdy nagłówek już jest na ekranie.

Na wąskich ekranach menu zwykle chowa się za przyciskiem. Użyj prawdziwego <button> z aria-expanded, a linki trzymaj wewnątrz <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 mówi czytnikowi ekranu, czy menu jest otwarte, a atrybut hidden usuwa listę zarówno z ekranu, jak i z drzewa dostępności, dopóki menu jest zamknięte. Na szerokich ekranach listę pokazuje się przez media query, a przycisk się ukrywa.

Częste błędy

Obejmowanie każdej grupy linków elementem <nav>. Używaj go do menu głównego, okruszków, paginacji i spisów treści. Linki w tekście nie są blokami nawigacji.
Przycisk menu zrobiony z <div>. Nie da się na nim ustawić fokusu ani nacisnąć go klawiaturą. Użyj <button>.
Kilka nav bez etykiet. Dodaj do każdego aria-label albo aria-labelledby, żeby dało się je rozróżnić.
Samo pokolorowanie bieżącego linku. Dodaj aria-current="page"; sam kolor nie jest ogłaszany i nie każdy musi go widzieć.
Linki z href="#" na produkcji. W demo są w porządku, ale prawdziwe pozycje menu potrzebują prawdziwych URL, żeby działały po otwarciu w nowej karcie. Strona o linkach wyjaśnia, jak działają wartości href.

Najczęściej zadawane pytania

Czym jest znacznik nav w HTML?

<nav> to element semantyczny, który obejmuje blok głównych linków nawigacyjnych, na przykład menu witryny, spis treści albo okruszki. Czytniki ekranu pokazują go jako punkt orientacyjny nawigacji, więc użytkownicy mogą od razu do niego przeskoczyć.

Czy linki w nav powinny być w liście?

To częsty i dobry wzorzec: <ul> z elementami <li> pozwala czytnikom ekranu podać, ile linków ma menu. Zwykłe linki bezpośrednio w <nav> też są poprawne, na przykład przy dwóch albo trzech linkach w rzędzie.

Czy każda grupa linków potrzebuje elementu nav?

Nie. Używaj <nav> tylko do głównych bloków nawigacji. Kilka linków w akapicie albo krótka lista linków prawnych w stopce go nie potrzebują, a zbyt wiele punktów orientacyjnych nawigacji utrudnia znalezienie każdego z nich.

Jak zrobić poziomy pasek nawigacji?

Umieść linki w <ul> wewnątrz <nav>, a potem nadaj liście display: flex; list-style: none; padding: 0; i gap. Flexbox ułoży elementy w rzędzie.

Jak pokazać bieżącą stronę w menu?

Dodaj aria-current="page" do linku strony, na której jest użytkownik, i ostyluj go selektorem [aria-current="page"]. Czytniki ekranu też ogłoszą go wtedy jako bieżącą stronę.

Czy strona może mieć więcej niż jeden nav?

Tak, na przykład menu główne, okruszki i spis treści. Nadaj każdemu inny aria-label, na przykład "Main" albo "Breadcrumb", żeby użytkownicy czytników ekranu mogli je rozróżnić.

Powiązane zagadnienia