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
      class="rvo-link rvo-tabs__item-link rvo-tabs__item-link--active rvo-link--active rvo-link--no-underline"
      role="tab"
      aria-selected="true"
      href="#tab-1"
    >
      Tab 1
    </a>
  </li>
  <li role="presentation" class="rvo-tabs__item">
    <a
      class="rvo-link rvo-tabs__item-link rvo-link--no-underline rvo-link--normal"
      role="tab"
      aria-selected="false"
      href="#tab-2"
    >
      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​

  • Zorg ervoor dat de eerste actieve tab relevant is voor de meeste gebruikers.
  • Gebruik geen tabs als de gebruiker de content in de verschillende tabs in één overzicht moet kunnen zien en scannen.
  • Gebruik duidelijke titels van de tabs die aangeven welke content er in de sectie getoond wordt.
  • Gebruik tabs niet als vervanging van navigatie.
  • Tabs zijn niet geschikt wanneer een gebruiker secties met content met elkaar moet vergelijken.
  • Kijk eerst of de content versimpeld kan worden voordat er gebruik gemaakt wordt van tabs.
  • Onderzoek of het beter is om content op de te delen in verschillende pagina's.
  • Als er teveel tabs nodig zijn en er horizontaal een gebrek aan ruimte ontstaat kijk dan of een Accordion een betere oplossing is.

Rijkshuisstijl​

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

Bronnen​