Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Semantiek en indeling

Het element <nav>

Het <nav>-element van HTML vertegenwoordigt een gedeelte van een pagina waarvan het doel is navigatielinks te bieden, hetzij binnen het huidige document, hetzij naar andere documenten. Veelvoorkomende voorbeelden van navigatiesecties zijn menu's, inhoudsopgaven en indexen.

Auteur: Maarten Soetens

Code 
<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>
Resultaat in de browser

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksopmerkingen

  • Het is niet noodzakelijk dat alle links zich in een <nav>-element bevinden. <nav> is alleen bedoeld voor een belangrijk blok navigatielinks; het <footer>-element bijvoorbeeld bevat vaak een lijst met links die niet in een <nav>-element hoeven te staan.
  • Een document kan meerdere <nav>-elementen bevatten, bijvoorbeeld één voor sitenavigatie en één voor navigatie binnen de pagina. aria-labelledby kan in dat geval worden gebruikt om de toegankelijkheid te bevorderen, zie voorbeeld.
  • User agents, zoals schermlezers gericht op gebruikers met een beperking, kunnen dit element gebruiken om te bepalen of de initiële weergave van uitsluitend navigatie-inhoud moet worden overgeslagen.

Voorbeelden

In dit voorbeeld wordt een <nav>-blok gebruikt om een ongeordende lijst (<ul>) van links te bevatten. Met de juiste CSS kan dit worden weergegeven als een zijbalk, navigatiebalk of vervolgkeuzemenu.

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>
Resultaat in de browser

De semantiek van het nav-element is die van het aanbieden van links. Een nav-element hoeft echter geen lijst te bevatten, het kan ook andere soorten inhoud bevatten. In dit navigatieblok worden links in lopende tekst aangeboden:

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>
Resultaat in de browser

Technische samenvatting

Inhoudscategorieën Flow content, sectioning content, palpable content.
Toegestane inhoud Flow content.
Weglaten van tags Geen, zowel de begin- als eindtag zijn verplicht.
Toegestane ouders Elk element dat flow content accepteert.
Impliciete ARIA-rol navigation
Toegestane ARIA-rollen Geen role toegestaan
DOM-interface HTMLElement

Zie ook

Verwante elementen

<address> <article> <aside> <details> <dialog> <div> <footer> <header>