<nav>: Das Navigationselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <nav> HTML-Element repräsentiert einen Abschnitt einer Seite, dessen Zweck es ist, Navigationslinks bereitzustellen, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Häufige Beispiele für Navigationsabschnitte sind Menüs, Inhaltsverzeichnisse und Indizes.

Probieren Sie es aus

Attribute

Dieses Element umfasst nur die globalen Attribute.

Verwendungshinweise

  • Es ist nicht notwendig, dass alle Links in einem <nav>-Element enthalten sind. <nav> ist nur für einen größeren Block von Navigationslinks vorgesehen; typischerweise enthält das <footer>-Element oft eine Liste von Links, die nicht in einem <nav>-Element sein müssen.
  • Ein Dokument kann mehrere <nav>-Elemente enthalten, beispielsweise eines für die Seitennavigation und eines für die Innerhalb-Seite-Navigation. aria-labelledby kann in einem solchen Fall verwendet werden, um die Barrierefreiheit zu fördern, siehe Beispiel.
  • Benutzeragenten, wie Bildschirmlesegeräte für Benutzer mit Behinderungen, können dieses Element verwenden, um festzustellen, ob die anfängliche Darstellung von nur-Navigation-Inhalten ausgelassen werden soll.

Beispiele

In diesem Beispiel wird ein <nav>-Block verwendet, um eine unsortierte Liste (<ul>) von Links zu enthalten. Mit geeigneten CSS kann dies als Seitenleiste, Navigationsleiste oder Dropdown-Menü präsentiert werden.

html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Die Semantik des nav-Elements besteht darin, Links bereitzustellen. Ein nav-Element muss jedoch keine Liste enthalten, es kann auch andere Arten von Inhalten enthalten. In diesem Navigationsblock werden Links in Prosa bereitgestellt:

html
<nav>
  <h2>Navigation</h2>
  <p>
    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
    whence the sounds of battle can be heard. To the east you can see a large
    mountain, upon which many <a href="/school">school papers</a> are littered.
    Far up this mountain you can spy a little figure who appears to be me,
    desperately scribbling a <a href="/school/thesis">thesis</a>.
  </p>
  <p>
    To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>
    To the south lies a dark and dank <a href="/about">contacts page</a>.
    Cobwebs cover its disused entrance, and at one point you see a rat run
    quickly out of the page.
  </p>
</nav>

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Abschnittsinhalte, greifbarer Inhalt.
Erlaubte Inhalte Flussinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert.
Implizite ARIA-Rolle navigation
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-nav-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
nav

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch