<nav> HTML-Navigationsbereichselement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

In diesem Artikel

Probieren Sie es aus

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>
  This BMX bike is a solid step into the pro world. It looks as legit as it
  rides and is built to polish your skills.
</p>

nav {
  border-bottom: 1px solid black;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  display: inline-block;
  color: black;
  content: ">";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

Attribute

Dieses Element beinhaltet 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 hat das <footer>-Element oft eine Liste von Links, die nicht in einem <nav>-Element enthalten sein müssen.
Ein Dokument kann mehrere <nav>-Elemente haben, zum Beispiel eines für die Seitennavigation und eines für die innerseitige Navigation. aria-labelledby kann in solchen Fällen verwendet werden, um die Zugänglichkeit zu verbessern, siehe Beispiel.
Benutzeragenten, wie Bildschirmlesegeräte für behinderte Benutzer, können dieses Element verwenden, um zu bestimmen, ob die initiale Darstellung von nur aus Navigation bestehendem Inhalt weggelassen werden soll.

Beispiele

In diesem Beispiel wird ein <nav>-Block verwendet, um eine ungeordnete Liste (<ul>) von Links zu enthalten. Mit entsprechendem CSS kann dies als Seitenleiste, Navigationsleiste oder Dropdown-Menü dargestellt 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 liegt darin, Links bereitzustellen. Allerdings muss ein nav-Element keine Liste enthalten, es kann auch andere Arten von Inhalten enthalten. In diesem Navigationsblock werden Links im Fließtext 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 Erlaubter Inhalt Tag-Auslassung Zulässige Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Fließender Inhalt, gliedernder Inhalt, greifbarer Inhalt.

Fließender Inhalt.

Keine, sowohl das Anfangs- als auch das End-Tag sind zwingend erforderlich.

Jedes Element, das fließenden Inhalt akzeptiert.

navigation

Keine role erlaubt

[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Andere abschnittsbezogene Elemente: <body>, <article>, <section>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>;
Abschnitte und Umrisse eines HTML-Dokuments.
ARIA: Navigationsrolle

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden