Header-element met hoofdnavigatie

De navigatiebalk vormt samen met het logo een herkenbaar onderdeel in Rijkshuisstijl websites. En wordt gebruikt bovenaan iedere pagina.

• In de navigatiebalk kunnen verschillende elementen toegevoegd worden afhankelijk van de benodigdheden per website en applicatie. Zo kunnen er bijvoorbeeld de navigatielinks, een zoekfunctie of de inlogfunctie komen te staan.
• Het type navigatiebalk hangt af van de pagina waar de gebruiker zich op bevind:
  • De navigatiebalk met tabbladnavigatie dient toegepast te worden op pagina's die zich op de hoogste navigatielaag bevinden. Denk bijvoorbeeld aan de hoofdpagina van de site.
  • Subpagina's dienen gebruik te maken van de kruimelpadnavigatie zodat de gebruiker een duidelijk overzicht heeft van de afgelegde route.
• Het eerste element binnen de navigatie dient altijd de hoofdpagina te zijn. Zowel binnen de tabbladnavigatie als binnen de kruimelpadnavigatie. Hierbij kan gebruik gemaakt worden van de het woord Hoofdpagina of de titel van de instantie of applicatie. Aan deze link wordt automatisch het "home"-icoon toegevoegd.

Beschikbare voorbeelden:

Uitlijning content binnen de navigatiebalk

Het is gewenst om de content binnen het menu dezelfde uitlijning te geven als de content van de pagina.

Om de content binnen het menu uit te lijnen met de standaard Rijksoverheidsuitlijning en opmaak, kan er gebruik gemaakt worden van de onderstaande html

Navigatiebalk enkel element

• Om gebruik te maken van de standaard Rijksoverheid uitlijning binnen een menu met enkel een navigatie-element, voeg een <div> toe direct binnen de <nav>.
• Voeg aria-current="page" toe aan het de actieve <a> om visuele feedback te geven aan de gebruiker over op welke pagina momenteel actief is. Deze informatie wordt ook door screenreaders gebruikt om aan te geven welke link er visueel als actief vormgegeven is.
• Voeg een omschrijvende naam toe aan de <nav> zodat gebruikers die gebruik maken van hulptechnologiën kunnen zien wat het onderwerp van de navigatie is. Bij het hoofdmenu zal dit meestal "Hoofdnavigatie" zijn. Voorbeeld: <nav aria-label="Hoofdnavigatie">. Houdt voor het label de taal van het document aan.

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <nav aria-label="Hoofdnavigatie">
    <div>
      <ul>
          <li ><a href="/" aria-current="page">Hoofdpagina</a></li>
          <li><a href="">Ipsum</a></li>
          <li><a href="">Dolor</a></li>
      </ul>
    </div>
  </nav>
</header>
              
            

Navigatiebalk meerdere elementen

• Om gebruik te maken van de standaard Rijksoverheid uitlijning binnen een menu met verschillende elementen, zoals bijvoorbeeld navigatie-elementen gecombineerd met een loginfunctionaliteit of een zoekfunctie.
• Groepeer de content binnen een <section>, met direct daarbinnen een <div>.
• Voeg aria-current="page" toe aan het de actieve <a> om visuele feedback te geven aan de gebruiker over op welke pagina momenteel actief is. Deze informatie wordt ook door screenreaders gebruikt om aan te geven welke link er visueel als actief vormgegeven is.

Visueel-voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <section>
    <div>

      <nav aria-label="Hoofdnavigatie">
        <ul>
            <li ><a href="/" aria-current="page">Hoofdpagina</a></li>
            <li><a href="">Ipsum</a></li>
            <li><a href="">Dolor</a></li>
        </ul>
      </nav>

      <form class="search">
        <input type="text" placeholder="Zoeken">
        <button type="submit">Zoeken</button>
      </form>

    </div>
  </section>
</header>
              
            

Navigatiebalk met tabbladnavigatie

Standaard navigatie weergave voor pagina's als de gebruiker nog geen keuze gemaakt heeft.

• De navigatiebalk met tabbladnavigatie dient toegepast te worden op pagina's die zich op de hoogste navigatielaag bevinden. Denk bijvoorbeeld aan de hoofdpagina van de site.
• De tabbladnavigatie maakt gebruik van een aangepast menu voor smallere schermen. Denk bijvoorbeeld aan mobiele apparaten.
  • Het mobiele menu wordt enkel op smalle schermresoluties getoont en is op brede schermresoluties niet zichtbaar.
  • In dit aangepaste menu worden de elementen onder elkaar getoond in plaats van naast elkaar.
  • Het mobiele menu is optioneel te verrijken met JavaScript, zodat het standaard ingeklapt is en alleen het menu-icoon (hamburgericoon) zichtbaar is. Zie hiervoor het voorbeeld Navigatiebalk met responsive kruimelpadnavigatie.
• Voeg aria-current="page" toe aan het de actieve <a> om visuele feedback te geven aan de gebruiker over op welke pagina momenteel actief is. Deze informatie wordt ook door screenreaders gebruikt om aan te geven welke link er visueel als actief vormgegeven is.

Visueel voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <nav aria-label="Hoofdnavigatie">
    <div>
      <ul>
          <li ><a href="/" aria-current="page">Hoofdpagina</a></li>
          <li><a href="">Ipsum</a></li>
          <li><a href="">Dolor</a></li>
      </ul>
    <div>
  </nav>
</header>
              
            

Navigatiebalk met responsive tabbladnavigatie

Een verrijkte versie van de tabbladnavigatie, die op smallere schermen standaard ingeklapt wordt.

• Op smalle schermen is dit menu standaard ingeklapt en is alleen het menu-icoon (hamburgericoon) zichtbaar.
• Schaalbaar menu toevoegen:
  • Plaats <script defer src="pad/naar/navigation.min.js"></script> in de <head> van het document om het menu te verrijken.
  • Het defer attribuut zorgt ervoor dat het script in de achtergrond geladen wordt, zodat het tonen van de pagina niet geblokkeerd wordt.
  • Wanneer JavaScript niet beschikbaar is, wordt het menu niet verrijkt maar werkt het zoals gebruikelijk.
• Breekpunt instellen:
  • Het standaard ingestelde breekpunt is 42rem. Bij een schermbreedte van 42rem of meer wordt het ingeklapte menu getoond door middel van een icoon.
  • Zodra de elementen niet meer op een regel passen en onder elkaar getoond worden is het voor de juiste weergave belangrijk om het breekpunt aan te passen.
  • Gebruik data-attributen op de <nav> ter configuratie.
    • Voeg een data-media toe aan de <nav>. Bijvoorbeeld: data-media="(min-width: 100rem)". Het getal geeft aan op welke schermbreedte het breekpunt ligt. Bijvoorbeeld voor het enkel op mobiel tonen van het menu kan het breekpunt op 24rem liggen. Voor meer informatie zie het onderstaande voorbeeld en media query.
• Toegankelijkheid:
  • Gebruik data-attributen op de <nav> ter configuratie.
    • Stel toegankelijke namen in de voor de "open"- en "sluit"-knop middels data-open-label en data-close-label. Let op: gebruik voor deze namen dezelfde taal als het document.
  • Voeg aria-current="page" toe aan het de actieve <a> om visuele feedback te geven aan de gebruiker over op welke pagina momenteel actief is. Deze informatie wordt ook door screenreaders gebruikt om aan te geven welke link er visueel als actief vormgegeven is.

Visueel voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <nav data-open-label="Menu" data-close-label="Sluit menu" data-media="(min-width: 24rem)" aria-label="Hoofdnavigatie">
    <div>
      <ul>
          <li ><a href="/" aria-current="page">Hoofdpagina</a></li>
          <li><a href="">Ipsum</a></li>
          <li><a href="">Dolor</a></li>
      </ul>
    <div>
  </nav>
</header>
              
            

Navigatiebalk met kruimelpadnavigatie

Standaard navigatie weergave voor pagina's als de gebruiker al een keuze gemaakt heeft, en een pad begonnen is.

• Subpagina's dienen gebruik te maken van de kruimelpadnavigatie zodat de gebruiker een duidelijk overzicht heeft van de afgelegde route.
• Door de <header> een class breadcrumbs te geven past deze zich aan tot een kruimelpadnavigatie.
• Let op: De kruimelpadnavigatie is ook op mobiel volledig zichtbaar en wordt niet ingeklapt.
• Voeg voor gebruikers die gebruik maken van hulptechnologiën een label toe aan de kruimelpadnavigatie aria-label="kruimelpad" om context mee te geven. Zie onderstaand voorbeeld voor meer informatie.
• Voeg aan de huidige pagina aria-current="page" toe om aan gebruikers die gebruik maken van hulptechnologiën aan te geven dat deze pagina de huidige pagina is.

Visueel voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <nav aria-label="Kruimelpad" class="breadcrumb-bar">
    <div>
      <ol>
        <li><a href="/">Hoofdpagina</a></li>
        <li><a href="">Ipsum</a></li>
        <li><a href="" aria-current="page">Dolor</a></li>
      </ol>
    </div>
  </nav>
</header>
              
            

Navigatiebalk met kruimelpadnavigatie en zoekfunctie

De zoekfunctie binnen de hoofdnavigatie, om de gebruiker te helpen navigeren ook als de link niet beschikbaar is binnen het standaard menu.

• Het is mogelijk de zoekfunctie toe te voegen aan de hoofdnavigatie. Gebruik voor de uitlijning de uitlijning voor de structuur van de navigatiebalk met meerdere elementen. Zie bijgevoegd html voorbeeld.

Visueel voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <section>
    <div>

      <nav aria-label="Kruimelpad" class="breadcrumb-bar">
        <ol>
          <li><a href="../index.html">Hoofdpagina</a></li>
          <li><a href="index.html">Ipsum</a></li>
          <li><a href="../html_examples/index.html" aria-current="page">Dolor</a></li>
        </ol>
      </nav>

      <form class="search">
        <input type="text" placeholder="Zoeken">
        <button type="submit">Zoeken</button>
      </form>

    </div>
  </section>

</header>
              
            

Navigatiebalk met kruimelpadnavigatie, zoekfunctie en loginfunctie

Naast de zoekfunctie kan ook de loginfunctie toegevoegd worden aan de hoofdnavigatie.

• Het is mogelijk om de loginfunctionaliteit toe toe voegen aan de navigatiebalk. Deze kan gecombineerd worden met de navigatie-elementen en de zoekfunctie. Gebruik voor de uitlijning ook hier de uitlijning voor de navigatiebalk met meerdere elementen. Zie het bijgevoegde html-voorbeeld.
• Om de login-functionaliteit en de zoekfunctie samen weer te geven kunnen ze gegroepeerd worden binnen een <div>. Dit is niet nodig wanneer er gebruik gemaakt wordt van een loginfunctie of een zoekveld in plaats van beide.

Visueel voorbeeld:

Html-voorbeeld:

              
<header>
  <a href="/" class="ro-logo" aria-label="Logo Rijksoverheid, ga naar de homepage van Manon">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <section>
    <div>

      <nav aria-label="Kruimelpad" class="breadcrumb-bar">
        <ol>
          <li><a href="../index.html">Hoofdpagina</a></li>
          <li><a href="index.html">Ipsum</a></li>
          <li><a href="../html_examples/index.html" aria-current="page">Dolor</a></li>
        </ol>
      </nav>

      <div>
        <a href="/" class="button icon icon-user">Inloggen</a>
        <form class="search">
          <input type="text" placeholder="Zoeken">
          <button type="submit">Zoeken</button>
        </form>
      </div>

    </div>
  </section>
</header>