<nav>

Das <nav>-Element kennzeichnet einen Bereich der Seite, der Navigationslinks enthält. Es markiert semantisch wichtige Navigationsbereiche wie Hauptmenüs, Breadcrumbs oder Inhaltsverzeichnisse und hilft assistiven Technologien, diese schnell zu finden.

Steckbrief <nav>

Kategorie: Semantik
Art: Gliederung
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

Grundlagen

Das <nav>-Element ist ein semantisches Container-Element für Navigationsbereiche. Es erstellt automatisch ein ARIA-Landmark vom Typ “navigation”, das von Screenreadern erkannt wird. Nutzer können so direkt zur Navigation springen, ohne sich durch die ganze Seite zu arbeiten.

Wichtig ist: Nicht jede Gruppe von Links braucht ein <nav>-Element. Es sollte nur für signifikante Navigationsbereiche verwendet werden, wie die Hauptnavigation der Website, die Footer-Navigation oder ein Inhaltsverzeichnis. Kleine Linklisten wie Social-Media-Icons oder ein einzelner “Zurück”-Link gehören nicht in ein <nav>.

Eine Seite kann mehrere <nav>-Elemente enthalten, zum Beispiel eins für die Hauptnavigation und eins für die Breadcrumbs. In diesem Fall solltest du jedes <nav> mit einem aria-label oder aria-labelledby versehen, damit Screenreader-Nutzer die verschiedenen Navigationsbereiche unterscheiden können.

Syntax

index.html

Grundsyntax

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>

Beispiele

3 Beispiele

Die häufigste Verwendung von <nav> ist die Hauptnavigation einer Website. Meist wird eine Liste (<ul>) mit Listenpunkten (<li>) und Links (<a>) verwendet:

index.html

Hauptnavigation mit Liste

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Breadcrumbs zeigen den Pfad zur aktuellen Seite und gehören ebenfalls in ein <nav>-Element. Das aria-label hilft, diese Navigation von anderen zu unterscheiden:

index.html

Breadcrumb-Navigation

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a> &raquo;</li>
    <li><a href="/docs">Docs</a> &raquo;</li>
    <li>nav</li>
  </ol>
</nav>

Ein Inhaltsverzeichnis innerhalb eines Artikels ist ein gutes Beispiel für eine sekundäre Navigation. Auch hier hilft das aria-label bei der Unterscheidung:

index.html

Inhaltsverzeichnis

<nav aria-label="Inhaltsverzeichnis">
  <h2>Inhaltsverzeichnis</h2>
  <ul>
    <li><a href="#grundlagen">Grundlagen</a></li>
    <li><a href="#syntax">Syntax</a></li>
    <li><a href="#beispiele">Beispiele</a></li>
    <li><a href="#barrierefreiheit">Barrierefreiheit</a></li>
  </ul>
</nav>

Barrierefreiheit

Das <nav>-Element ist ein ARIA-Landmark vom Typ “navigation”. Screenreader-Nutzer können mit Tastenkombinationen direkt zu allen <nav>-Bereichen auf einer Seite springen. Das macht die Navigation deutlich effizienter, weil sie nicht jeden Link einzeln durchgehen müssen.

Wenn du mehrere <nav>-Elemente auf einer Seite hast, ist es wichtig, jedes mit einem eindeutigen aria-label oder aria-labelledby zu versehen. So können Nutzer zwischen “Hauptnavigation”, “Footer-Navigation” und “Breadcrumb” unterscheiden. Ohne diese Labels würden Screenreader nur “Navigation” ankündigen, ohne zu sagen, welche.

Innerhalb der Navigation solltest du semantisch korrekte Link-Strukturen verwenden. Listen (<ul> oder <ol>) sind eine gute Wahl, weil Screenreader dann ansagen können, wie viele Links die Navigation enthält. Das aktuelle Seiten-Element kannst du mit aria-current="page" kennzeichnen.

Häufige Fehler

4 Fehler

01 Jede Linkliste in nav packen

Nicht jede Gruppe von Links braucht ein <nav>. Verwende es nur für signifikante Navigationsbereiche wie Hauptmenüs oder Inhaltsverzeichnisse. Ein einzelner “Zurück”-Link oder drei Social-Media-Icons sind keine Navigation im semantischen Sinn.

02 aria-label bei mehreren navs vergessen

Wenn du mehrere <nav>-Elemente auf einer Seite hast, braucht jedes ein eindeutiges Label. Sonst können Screenreader-Nutzer sie nicht unterscheiden. Ein simples aria-label="Hauptnavigation" und aria-label="Footer-Navigation" reicht schon.

03 nav in header verschachteln ohne Grund

Du kannst <nav> innerhalb von <header> verwenden, aber es ist nicht zwingend nötig. Beide sind eigenständige Landmarks. Wenn die Navigation außerhalb des Headers steht, ist das genauso korrekt.

04 Keine Skip-Links anbieten

Auch wenn <nav> ein Landmark ist, solltest du trotzdem einen “Skip to main content”-Link am Seitenanfang anbieten. Nicht alle Nutzer verwenden Landmark-Navigation, und Tastaturnutzer wollen manchmal einfach direkt zum Inhalt springen.

Browser-Kompatibilität

5 von 5

Das nav-Element wird von allen modernen Browsern vollständig unterstützt. Auch ältere Browser ab 2010 haben keine Probleme damit. In Legacy-Browsern wie IE8 wird es als normales div behandelt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Das nav-Element wird in HTML-Emails nicht unterstützt und sollte dort nicht verwendet werden. Die meisten Email-Clients ignorieren semantische HTML5-Elemente oder entfernen sie komplett. Verwende stattdessen table- oder div-Strukturen mit Inline-Styles.

Apple Mail

Keine

Semantische Navigations-Elemente werden nicht unterstützt.
Gmail

Keine

Gmail entfernt semantische HTML5-Elemente.
Outlook

Keine

Outlook ignoriert semantische Elemente vollständig.
Thunderbird

Keine

Keine Unterstützung für nav-Elemente.
Yahoo Mail

Keine

Semantische Elemente werden nicht unterstützt.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<nav>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter