Ausführbare HTML-Docs: HTML nav

Q: Sollen Links in nav in einer Liste stehen?

Das ist das übliche Muster und ein gutes: Ein mit -Einträgen lässt Screenreader ansagen, wie viele Links das Menü hat. Einfache Links direkt in sind ebenfalls gültig, zum Beispiel bei zwei oder drei Links in einer Reihe.

Q: Braucht jede Gruppe von Links ein nav-Element?

Nein. Nimm nur für wichtige Navigationsblöcke. Ein paar Links in einem Absatz oder eine kurze Liste rechtlicher Links im Footer brauchen es nicht, und zu viele nav-Landmarks machen jede einzelne schwerer auffindbar.

Q: Wie mache ich eine horizontale Navigationsleiste?

Setz die Links in ein in und gib der Liste display: flex; list-style: none; padding: 0; und ein gap. Flexbox ordnet die Einträge in einer Reihe an.

Q: Wie zeige ich die aktuelle Seite in einer Navbar an?

Füg dem Link zur Seite, auf der der Nutzer gerade ist, aria-current="page" hinzu und style ihn mit dem Selektor [aria-current="page"]. Screenreader sagen ihn dann auch als aktuelle Seite an.

Eine Navigationsleiste mit nav

Pack dein Menü in <nav> und setz die Links in eine Liste. Flexbox macht aus der Liste eine horizontale Leiste:

<!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 und padding: 0 entfernen die Aufzählungspunkte und die Einrückung. display: block an jedem Link lässt seinen Innenabstand echten Platz in der Leiste einnehmen, der ganze Kasten mit Innenabstand ist also die Klickfläche. Lösch die Zeile mit display: flex, und dasselbe Menü wird zu einer senkrechten Liste, so sieht ein Menü in einer Seitenleiste aus.

<nav> selbst sieht nach nichts aus. Seine Aufgabe ist die Bedeutung: Screenreader stellen es als Landmark navigation bereit, ein Nutzer kann also mit einer Taste zum Menü springen oder es überspringen.

Die aktuelle Seite markieren

Füg dem Link zur angezeigten Seite aria-current="page" hinzu. Das sagt Screenreadern „du bist hier“ und gibt CSS einen Ansatzpunkt, um den Link hervorzuheben:

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

Verschieb aria-current="page" zu einem anderen Link, und die Hervorhebung folgt ihm. Wenn du das Attribut stylst statt einer Klasse .active, bleiben Aussehen und Barrierefreiheit synchron: Das eine gibt es nicht ohne das andere.

Mehrere navs auf einer Seite: Labels und Breadcrumbs

Eine Seite kann ein Hauptmenü, Breadcrumbs und ein Inhaltsverzeichnis haben, jedes in seinem eigenen <nav>. Gib jedem ein aria-label, damit ein Screenreader „Breadcrumb Navigation“ ansagt statt dreimal „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>

Breadcrumbs verwenden eine geordnete Liste <ol>, weil die Reihenfolge zählt. Die Schrägstriche kommen aus CSS ::before, Screenreader lesen also nicht zwischen jedem Eintrag „Schrägstrich“ vor. Der letzte Eintrag ist die aktuelle Seite und kein Link.

Ein Inhaltsverzeichnis

Eine Liste von Links zu Abschnitten derselben Seite ist ebenfalls Navigation. Links mit #id springen zu dem Element mit dieser id; probier sie in der Vorschau aus:

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

Hier kommt das Label von einer sichtbaren Überschrift über aria-labelledby, was besser ist als aria-label, wenn die Überschrift schon auf dem Bildschirm steht.

Ein Menü für Mobilgeräte zum Aufklappen

Auf schmalen Bildschirmen verstecken sich Menüs meistens hinter einem Button. Nimm einen echten <button> mit aria-expanded und lass die Links in <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 sagt einem Screenreader, ob das Menü offen ist, und das Attribut hidden entfernt die Liste im geschlossenen Zustand sowohl vom Bildschirm als auch aus dem Barrierefreiheitsbaum. Auf breiten Bildschirmen würdest du die Liste per Media Query anzeigen und den Button verstecken.

Häufige Fehler

Jede Gruppe von Links in <nav> packen. Nimm es für das Hauptmenü, Breadcrumbs, Seitennummerierung und Inhaltsverzeichnisse. Links im Fließtext sind keine Navigationsblöcke.
Ein Menü-Button aus einem <div>. Er lässt sich per Tastatur weder fokussieren noch auslösen. Nimm <button>.
Mehrere navs ohne Labels. Füg jedem aria-label oder aria-labelledby hinzu, damit man sie auseinanderhalten kann.
Den aktuellen Link nur einfärben. Füg aria-current="page" hinzu; Farbe allein wird nicht angesagt und ist vielleicht nicht für alle sichtbar.
Links mit href="#" im Livebetrieb. In einer Demo sind sie in Ordnung, aber echte Menüeinträge brauchen echte URLs, damit sie auch in einem neuen Tab funktionieren. Wie href-Werte funktionieren, erklärt die Seite zum HTML Link.

Häufig gestellte Fragen

Was ist das nav-Tag in HTML?

<nav> ist ein semantisches Element, das einen Block mit wichtigen Navigationslinks umschließt, etwa das Menü der Website, ein Inhaltsverzeichnis oder Breadcrumbs. Screenreader führen es als Landmark navigation auf, damit Nutzer direkt dorthin springen können.

Sollen Links in nav in einer Liste stehen?

Das ist das übliche Muster und ein gutes: Ein <ul> mit <li>-Einträgen lässt Screenreader ansagen, wie viele Links das Menü hat. Einfache Links direkt in <nav> sind ebenfalls gültig, zum Beispiel bei zwei oder drei Links in einer Reihe.

Braucht jede Gruppe von Links ein nav-Element?

Nein. Nimm <nav> nur für wichtige Navigationsblöcke. Ein paar Links in einem Absatz oder eine kurze Liste rechtlicher Links im Footer brauchen es nicht, und zu viele nav-Landmarks machen jede einzelne schwerer auffindbar.

Wie mache ich eine horizontale Navigationsleiste?

Setz die Links in ein <ul> in <nav> und gib der Liste display: flex; list-style: none; padding: 0; und ein gap. Flexbox ordnet die Einträge in einer Reihe an.

Wie zeige ich die aktuelle Seite in einer Navbar an?

Füg dem Link zur Seite, auf der der Nutzer gerade ist, aria-current="page" hinzu und style ihn mit dem Selektor [aria-current="page"]. Screenreader sagen ihn dann auch als aktuelle Seite an.

Darf eine Seite mehr als ein nav haben?

Ja, zum Beispiel ein Hauptmenü, eine Breadcrumb-Leiste und ein Inhaltsverzeichnis. Gib jedem ein anderes aria-label wie "Main" oder "Breadcrumb", damit Screenreader-Nutzer sie auseinanderhalten können.

Verwandte Konzepte