Ga naar hoofdinhoud

Tabs

Voorbeeld HTML
<ul
  class="rvo-tabs rvo-ul rvo-ul--no-margin rvo-ul--no-padding rvo-ul--icon rvo-ul--icon-option-2"
  role="tablist"
  aria-label="Tabs"
>
  <li role="presentation" class="rvo-tabs__item">
    <a
      href="#tab-1"
      class="rvo-link rvo-tabs__item-link rvo-tabs__item-link--active rvo-link--active rvo-link--no-underline"
      role="tab"
      aria-selected="true"
    >
      Tab 1
    </a>
  </li>
  <li role="presentation" class="rvo-tabs__item">
    <a
      href="#tab-2"
      class="rvo-link rvo-tabs__item-link rvo-link--no-underline rvo-link--normal"
      role="tab"
      aria-selected="false"
    >
      Tab 2
    </a>
  </li>
</ul>
Open in nieuwe tab

Tabs

Met tabs kunnen gebruikers navigeren tussen verschillende secties content die gerelateerd zijn aan elkaar waar bij telkens één gekozen sectie wordt getoond. Hierbij blijft de gebruiker op dezelfde pagina zonder dat deze wordt herladen.

Wanneer gebruik je tabs​

Als je gebruikers snel wil laten schakelen tussen verschillende content secties met gerelateerde content op dezelfde pagina.

Anatomie van het component​

Het component bestaat uit:

  • Titel van een tab
  • Inhoud van een tab

Richtlijnen​

  • Gebruik tabs alleen als de content logisch op te delen is in duidelijk gelabelde secties.
  • Zorg dat de eerste tab het meest relevant is voor de meeste gebruikers.
  • Gebruik tabs niet als gebruikers alle content in één keer moeten kunnen zien, lezen of vergelijken.
  • Gebruik tabs niet als de totale hoeveelheid content de pagina traag maakt om te laden.
  • Gebruik tabs niet als vervanging van paginanavigatie.
  • Test eerst of de content zonder tabs duidelijk is. Overweeg of het beter is om de content te versimpelen, over meerdere pagina’s te verdelen, op één pagina te houden met kopjes, of een inhoudsopgave te gebruiken.
  • Gebruik tabs als gebruikers niet meer dan één sectie tegelijk hoeven te zien en snel willen wisselen.

Rijkshuisstijl​

De Rijkshuisstijl heeft geen specifieke eisen of richtlijnen wat betreft tabs.

Bronnen​