<nav>

Zuletzt aktualisiert am 3. Februar 2026

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.

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

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

Beispiele

Hauptnavigation

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

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

Breadcrumb-Navigation

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:

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

Inhaltsverzeichnis

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

<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

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.

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.

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.

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

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.

Email-Kompatibilität

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.

Verwandte Elemente