Bootstrap 5.2 / Componenten

Navs en tabs

Documentatie en voorbeelden over het gebruik van de meegeleverde navigatiecomponenten van Bootstrap.

Basis-nav

De navigatiemogelijkheden in Bootstrap delen dezelfde algemene markup en stijlen, van de basisklasse .nav tot de active- en disabled-states. Wissel van modifier-klasse om tussen de stijlen te schakelen.

Het basiscomponent .nav is met flexbox gebouwd en biedt een stevige basis om allerlei soorten navigatiecomponenten te bouwen. Het bevat een aantal stijl-overrides (om met lijsten te werken), wat linkpadding voor grotere klikvlakken en basale disabled-styling.

Let op

Het basiscomponent .nav bevat geen enkele .active-state. De volgende voorbeelden bevatten die klasse vooral om te demonstreren dat deze specifieke klasse geen bijzondere styling activeert.

Gebruik het attribuut aria-current om de actieve status aan hulptechnologieën door te geven — met de waarde page voor de huidige pagina, of true voor het huidige item in een set.

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Er worden overal klassen gebruikt, dus je markup kan supersoepel zijn. Gebruik <ul>s zoals hierboven, <ol> als de volgorde van je items belangrijk is, of stel je eigen variant samen met een <nav>-element. Omdat de .nav display: flex gebruikt, gedragen de nav-links zich net als nav-items, maar zonder de extra markup.

HTML

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Actief</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Uitgeschakeld</a>
</nav>

Beschikbare stijlen

Wijzig de stijl van het .nav-component met modifiers en utilities. Combineer naar behoefte, of bouw je eigen variant.

Horizontale uitlijning

Wijzig de horizontale uitlijning van je nav met flexbox-utilities. Standaard zijn navs links uitgelijnd, maar je kunt ze eenvoudig centreren of rechts uitlijnen.

Gecentreerd met .justify-content-center:

HTML

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Rechts uitgelijnd met .justify-content-end:

HTML

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Verticaal

Stapel je navigatie door de richting van de flex-items te wijzigen met de utility .flex-column. Wil je ze op sommige viewports wel stapelen en op andere niet? Gebruik dan de responsieve versies (bijv. .flex-sm-column).

HTML

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Zoals altijd is verticale navigatie ook zonder <ul>s mogelijk.

HTML

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Actief</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Uitgeschakeld</a>
</nav>

Tabs

Neemt de basis-nav van hierboven en voegt de klasse .nav-tabs toe om een tabbladinterface te genereren. Gebruik ze om tabbare gebieden te maken met onze tab-JavaScript-plugin.

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Pills

Neem diezelfde HTML, maar gebruik in plaats daarvan .nav-pills:

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Fill en justify

Laat de inhoud van je .nav de volledige beschikbare breedte innemen met een van twee modifier-klassen. Gebruik .nav-fill om alle beschikbare ruimte proportioneel met je .nav-items te vullen. Merk op dat alle horizontale ruimte wordt ingenomen, maar dat niet elk nav-item dezelfde breedte heeft.

HTML

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Veel langere nav-link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Bij een op <nav> gebaseerde navigatie kun je .nav-item gerust weglaten, omdat alleen .nav-link nodig is om <a>-elementen op te maken.

HTML

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Actief</a>
  <a class="nav-link" href="#">Veel langere nav-link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Uitgeschakeld</a>
</nav>

Gebruik .nav-justified voor even brede elementen. Alle horizontale ruimte wordt door nav-links ingenomen, maar anders dan bij .nav-fill hierboven heeft elk nav-item dezelfde breedte.

HTML

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Veel langere nav-link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Vergelijkbaar met het .nav-fill-voorbeeld, maar met een op <nav> gebaseerde navigatie.

HTML

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Actief</a>
  <a class="nav-link" href="#">Veel langere nav-link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Uitgeschakeld</a>
</nav>

Werken met flex-utilities

Heb je responsieve nav-varianten nodig, overweeg dan een reeks flexbox-utilities. Die zijn uitgebreider, maar bieden meer aanpasmogelijkheden over responsieve breakpoints heen. In het onderstaande voorbeeld is onze nav op het laagste breakpoint gestapeld en gaat hij vanaf het small-breakpoint over naar een horizontale layout die de beschikbare breedte vult.

HTML

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Actief</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Langere nav-link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Uitgeschakeld</a>
</nav>

Over toegankelijkheid

Gebruik je navs om een navigatiebalk te maken, voeg dan role="navigation" toe aan de meest logische bovenliggende container van de <ul>, of wikkel een <nav>-element om de hele navigatie. Voeg de rol niet aan de <ul> zelf toe, want daarmee voorkom je dat die door hulptechnologieën als echte lijst wordt aangekondigd.

Let op: navigatiebalken horen, ook als ze met de klasse .nav-tabs visueel als tabbladen zijn opgemaakt, geen role="tablist"-, role="tab"- of role="tabpanel"-attributen te krijgen. Die zijn alleen passend voor dynamische tabbladinterfaces, zoals beschreven in het tabs-patroon van de ARIA Authoring Practices Guide. Zie JavaScript-gedrag voor een voorbeeld van dynamische tabbladinterfaces. Het attribuut aria-current is niet nodig bij dynamische tabbladinterfaces, omdat onze JavaScript de geselecteerde status afhandelt door aria-selected="true" op het actieve tabblad te zetten.

Dropdowns gebruiken

Voeg dropdownmenu's toe met wat extra HTML en de dropdowns-JavaScript-plugin.

Tabs met dropdowns

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Actie</a></li>
      <li><a class="dropdown-item" href="#">Nog een actie</a></li>
      <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Losstaande link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

Pills met dropdowns

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Actief</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Actie</a></li>
      <li><a class="dropdown-item" href="#">Nog een actie</a></li>
      <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Losstaande link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Uitgeschakeld</a>
  </li>
</ul>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken navs nu lokale CSS-variabelen op .nav, .nav-tabs en .nav-pills, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Op de basisklasse .nav:

Standaardwaarden: zie scss/_nav.scss in de Bootstrap-broncode.

Op de modifier-klasse .nav-tabs:

Standaardwaarden: zie scss/_nav.scss in de Bootstrap-broncode.

Op de modifier-klasse .nav-pills:

Standaardwaarden: zie scss/_nav.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

JavaScript-gedrag

Gebruik de tab-JavaScript-plugin — los of via het gecompileerde bootstrap.js-bestand — om onze navigatietabs en -pills uit te breiden en tabbladpanelen met lokale content te maken.

Dit is wat opvulcontent bij het tabblad Home. Klik je op een ander tabblad, dan wordt dit tabblad verborgen en het volgende getoond. De tab-JavaScript wisselt klassen om de zichtbaarheid en styling van de content te regelen. Je kunt hem gebruiken met tabs, pills en elke andere navigatie op basis van .nav.

Dit is wat opvulcontent bij het tabblad Profiel. Klik je op een ander tabblad, dan wordt dit tabblad verborgen en het volgende getoond. De tab-JavaScript wisselt klassen om de zichtbaarheid en styling van de content te regelen. Je kunt hem gebruiken met tabs, pills en elke andere navigatie op basis van .nav.

Dit is wat opvulcontent bij het tabblad Contact. Klik je op een ander tabblad, dan wordt dit tabblad verborgen en het volgende getoond. De tab-JavaScript wisselt klassen om de zichtbaarheid en styling van de content te regelen. Je kunt hem gebruiken met tabs, pills en elke andere navigatie op basis van .nav.

Dit is wat opvulcontent bij het tabblad Uitgeschakeld.

HTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profiel</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Uitgeschakeld</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Om aan je behoeften te voldoen werkt dit met op <ul> gebaseerde markup, zoals hierboven getoond, of met willekeurige zelfgemaakte markup. Let op: gebruik je <nav>, voeg daar dan niet direct role="tablist" aan toe, want daarmee overschrijf je de eigen rol van het element als navigatie-landmark. Schakel in plaats daarvan over op een ander element (in het voorbeeld hieronder een eenvoudige <div>) en wikkel de <nav> eromheen.

Dit is wat opvulcontent bij het tabblad Uitgeschakeld.

HTML

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profiel</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Uitgeschakeld</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

De tabs-plugin werkt ook met pills.

Dit is wat opvulcontent bij het tabblad Uitgeschakeld.

HTML

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profiel</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Uitgeschakeld</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

En met verticale pills. Idealiter voeg je bij verticale tabs ook aria-orientation="vertical" toe aan de container van de tablijst.

Dit is wat opvulcontent bij het tabblad Uitgeschakeld.

Dit is wat opvulcontent bij het tabblad Berichten. Klik je op een ander tabblad, dan wordt dit tabblad verborgen en het volgende getoond. De tab-JavaScript wisselt klassen om de zichtbaarheid en styling van de content te regelen. Je kunt hem gebruiken met tabs, pills en elke andere navigatie op basis van .nav.

Dit is wat opvulcontent bij het tabblad Instellingen. Klik je op een ander tabblad, dan wordt dit tabblad verborgen en het volgende getoond. De tab-JavaScript wisselt klassen om de zichtbaarheid en styling van de content te regelen. Je kunt hem gebruiken met tabs, pills en elke andere navigatie op basis van .nav.

HTML

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profiel</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Uitgeschakeld</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Berichten</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Instellingen</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Toegankelijkheid

Dynamische tabbladinterfaces, zoals beschreven in het tabs-patroon van de ARIA Authoring Practices Guide, vereisen role="tablist", role="tab", role="tabpanel" en aanvullende aria-attributen om hun structuur, functionaliteit en huidige status over te brengen aan gebruikers van hulptechnologieën (zoals schermlezers). Als goede praktijk raden we aan <button>-elementen voor de tabs te gebruiken, omdat dat besturingselementen zijn die een dynamische wijziging activeren, en geen links die naar een nieuwe pagina of locatie navigeren.

In lijn met het ARIA Authoring Practices-patroon krijgt alleen het momenteel actieve tabblad toetsenbordfocus. Wanneer de JavaScript-plugin wordt geïnitialiseerd, zet die tabindex="-1" op alle inactieve tabbedieningselementen. Zodra het actieve tabblad focus heeft, activeren de pijltoetsen het vorige/volgende tabblad, waarbij de plugin de roving tabindex meeneemt. Let op: de JavaScript-plugin maakt bij pijltoetsinteracties geen onderscheid tussen horizontale en verticale tablijsten: ongeacht de oriëntatie van de tablijst gaan zowel de pijl omhoog als de pijl naar links naar het vorige tabblad, en de pijl omlaag en naar rechts naar het volgende tabblad.

Let op

Om toetsenbordnavigatie te vergemakkelijken, is het over het algemeen aan te raden ook de tabbladpanelen zelf focusbaar te maken, tenzij het eerste element met betekenisvolle content binnen het tabbladpaneel al focusbaar is. De JavaScript-plugin probeert dit aspect niet af te handelen — waar nodig moet je je tabbladpanelen expliciet focusbaar maken door tabindex="0" aan je markup toe te voegen.

Gevaar

De tab-JavaScript-plugin ondersteunt geen tabbladinterfaces met dropdownmenu's erin, omdat die zowel bruikbaarheids- als toegankelijkheidsproblemen veroorzaken. Vanuit bruikbaarheidsoogpunt kan het verwarrend zijn dat het trigger-element van het momenteel getoonde tabblad niet direct zichtbaar is (omdat het in het gesloten dropdownmenu zit). Vanuit toegankelijkheidsoogpunt is er momenteel geen zinnige manier om dit soort constructie op een standaard WAI ARIA-patroon af te beelden, wat betekent dat het niet eenvoudig begrijpelijk gemaakt kan worden voor gebruikers van hulptechnologieën.

Met data-attributen

Je kunt een tab- of pill-navigatie activeren zonder JavaScript te schrijven, simpelweg door data-bs-toggle="tab" of data-bs-toggle="pill" op een element op te geven. Gebruik deze data-attributen op .nav-tabs of .nav-pills.

HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profiel</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Berichten</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Instellingen</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Via JavaScript

Schakel tabbare tabs in via JavaScript (elk tabblad moet afzonderlijk worden geactiveerd):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Je kunt afzonderlijke tabs op verschillende manieren activeren:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Selecteer tabblad op naam

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Selecteer eerste tabblad

Fade-effect

Om tabs te laten infaden, voeg je .fade aan elke .tab-pane toe. Het eerste tabbladpaneel moet ook .show hebben om de eerste content zichtbaar te maken.

HTML

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Activeert je content als tabblad-element.

Je kunt een tab-instantie maken met de constructor, bijvoorbeeld:

const bsTab = new bootstrap.Tab('#myTab')

Methode	Omschrijving
`dispose`	Vernietigt de tab van een element.
`getInstance`	Statische methode waarmee je de tab-instantie kunt ophalen die bij een DOM-element hoort; je gebruikt hem zo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een tab-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecteert het opgegeven tabblad en toont het bijbehorende paneel. Elk ander tabblad dat eerder geselecteerd was, wordt gedeselecteerd en het bijbehorende paneel wordt verborgen. Keert terug naar de aanroeper voordat het tabbladpaneel daadwerkelijk getoond is (dus vóór de gebeurtenis `shown.bs.tab`).

Gebeurtenissen

Bij het tonen van een nieuw tabblad worden de gebeurtenissen in deze volgorde afgevuurd:

hide.bs.tab (op het huidige actieve tabblad)
show.bs.tab (op het te tonen tabblad)
hidden.bs.tab (op het vorige actieve tabblad, hetzelfde als bij de gebeurtenis hide.bs.tab)
shown.bs.tab (op het nieuw actieve, zojuist getoonde tabblad, hetzelfde als bij de gebeurtenis show.bs.tab)

Als er nog geen tabblad actief was, worden de gebeurtenissen hide.bs.tab en hidden.bs.tab niet afgevuurd.

Type gebeurtenis	Omschrijving
`hide.bs.tab`	Deze gebeurtenis wordt afgevuurd wanneer er een nieuw tabblad getoond gaat worden (en dus het vorige actieve tabblad verborgen gaat worden). Gebruik `event.target` en `event.relatedTarget` om respectievelijk het huidige actieve tabblad en het binnenkort actieve tabblad aan te spreken.
`hidden.bs.tab`	Deze gebeurtenis wordt afgevuurd nadat een nieuw tabblad is getoond (en dus het vorige actieve tabblad verborgen is). Gebruik `event.target` en `event.relatedTarget` om respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad aan te spreken.
`show.bs.tab`	Deze gebeurtenis wordt afgevuurd bij het tonen van een tabblad, maar voordat het nieuwe tabblad getoond is. Gebruik `event.target` en `event.relatedTarget` om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) aan te spreken.
`shown.bs.tab`	Deze gebeurtenis wordt afgevuurd bij het tonen van een tabblad, nadat het tabblad getoond is. Gebruik `event.target` en `event.relatedTarget` om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) aan te spreken.

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // nieuw geactiveerd tabblad
  event.relatedTarget // vorige actieve tabblad
})