Navs et onglet

Documentation et exemples d'utilisation des composants de navigation inclus dans Bootstrap.

Sur cette page

Navigation de base

La navigation disponible dans Bootstrap partage le balisage et les styles généraux, de la classe de base .nav aux états actif et désactivé. Échangez les classes de modificateurs pour basculer entre chaque style.

Le composant de base .nav est construit avec flexbox et fournit une base solide pour la construction de tous les types de composants de navigation. Il inclut des remplacements de style (pour travailler avec des listes), un rembourrage de liens pour des zones d'accès plus larges et un style de base désactivé.

Le composant de base .nav n'inclut aucun état .active. Les exemples suivants incluent la classe, principalement pour démontrer que cette classe particulière ne déclenche aucun style spécial.

Pour transmettre l'état actif aux technologies d'assistance, utilisez l'attribut aria-current — en utilisant la valeur page pour la page actuelle, ou true pour l'élément actuel d'un ensemble.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Les classes sont utilisées partout, de sorte que votre balisage peut être très flexible. Utilisez des <ul> comme ci-dessus, <ol> si l'ordre de vos articles est important, ou lancez le vôtre avec un <nav> élément. Étant donné que .nav utilise display : flex, les liens de navigation se comportent de la même manière que les éléments de navigation, mais sans le balisage supplémentaire.

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

Modèles disponibles

Modifiez le style du composant .nav avec des modificateurs et des utilitaires. Mélangez et assortissez au besoin, ou construisez le vôtre.

Alignement horizontal

Modifiez l'alignement horizontal de votre navigation avec les utilitaires de boîte flexible. Par défaut, les navs sont alignés à gauche, mais vous pouvez facilement les changer pour qu'ils soient alignés au centre ou à droite.

Centreravec .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Aligner à droite avec .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Vertical

Empilez votre navigation en changeant la direction de l'élément flexible avec l'utilitaire .flex-column. Besoin de les empiler sur certaines fenêtres mais pas sur d'autres ? Utilisez les versions réactives (par exemple, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Comme toujours, la navigation verticale est également possible sans <ul>.

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

Onglets

Prend la navigation de base ci-dessus et ajoute la classe .nav-tabs pour générer une interface à onglets. Utilisez-les pour créer des régions tabulables avec notre onglet plugin JavaScript.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Pilules

Prenez le même code HTML, mais utilisez plutôt .nav-pills :

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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">Disabled</a>
  </li>
</ul>

Remplir et justifier

Forcez le contenu de votre .nav à étendre toute la largeur disponible dans l'une des deux classes de modificateurs. Pour remplir proportionnellement tout l'espace disponible avec vos .nav-item, utilisez .nav-fill. Notez que tout l'espace horizontal est occupé, mais que tous les éléments de navigation n'ont pas la même largeur.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Lien de navigation beaucoup plus long</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Lorsque vous utilisez une navigation basée sur <nav>, vous pouvez omettre en toute sécurité .nav-item car seul .nav-link est requis pour le style <a> éléments.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Pour les éléments de largeur égale, utilisez .nav-justified. Tout l'espace horizontal sera occupé par des liens de navigation, mais contrairement au .nav-fill ci-dessus, chaque élément de navigation aura la même largeur.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer 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">Disabled</a>
  </li>
</ul>

Semblable à l'exemple .nav-fill utilisant une navigation basée sur <nav>.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Utilisation des utilitaires flexibles

Si vous avez besoin de variantes de navigation réactives, envisagez d'utiliser une série d' utilitaires de boîte flexible. Bien que plus détaillés, ces utilitaires offrent une plus grande personnalisation à travers les points d'arrêt réactifs. Dans l'exemple ci-dessous, notre navigation sera empilée sur le point d'arrêt le plus bas, puis s'adaptera à une disposition horizontale qui remplit la largeur disponible à partir du petit point d'arrêt.

<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="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer 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">Disabled</a>
</nav>

Concernant l'accessibilité

Si vous utilisez navs pour fournir une barre de navigation, assurez-vous d'ajouter un role="navigation" au conteneur parent le plus logique du <ul>, ou enveloppez un élément <nav> autour de l'ensemble de la navigation. N'ajoutez pas le rôle au <ul> lui-même, car cela l'empêcherait d'être annoncé comme une liste réelle par les technologies d'assistance.

Notez que les barres de navigation, même si elles sont visuellement stylées comme des onglets avec la classe .nav-tabs ne doivent pas recevoir role="tablist", role="tab" ou les attributs role="tabpanel" . Celles-ci ne conviennent que pour les interfaces à onglets dynamiques, comme décrit dans la WAI ARIA Pratiques de création. Voir comportement JavaScript pour les interfaces dynamiques à onglets dans cette section pour un exemple. L'attribut aria-current n'est pas nécessaire sur les interfaces à onglets dynamiques puisque notre JavaScript gère l'état sélectionné en ajoutant aria-selected="true" sur l'onglet actif.

Utilisation des listes déroulantes

Ajoutez des menus déroulants avec un peu de code HTML supplémentaire et le plugin JavaScript liste déroulante.

Onglets avec listes déroulantes

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated 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">Disabled</a>
  </li>
</ul>

Pilules avec listes déroulantes

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated 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">Disabled</a>
  </li>
</ul>

Sass

Variables

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Comportement JavaScript

Utilisez le plug-in JavaScript pour les onglets, incluez-le individuellement ou via le fichier bootstrap.js compilé, pour étendre nos onglets et pilules de navigation afin de créer des volets tabulables de contenu local.

Interfaces à onglets dynamiques, comme décrit dans le WAI ARIA Pratiques de création, nécessitent role="tablist", role="tab", role="tabpanel", et des attributs aria- supplémentaires afin de transmettre leur structure, leur fonctionnalité et leur état actuel aux utilisateurs de technologies d'assistance (telles que les lecteurs d'écran). Comme meilleure pratique, nous vous recommandons d'utiliser les éléments <button> pour les onglets, car ce sont des contrôles qui déclenchent un changement dynamique, plutôt que des liens qui naviguent vers une nouvelle page ou un nouvel emplacement.

Notez que les interfaces à onglets dynamiques ne doivent pas contenir de menus déroulants, car cela entraîne à la fois des problèmes de convivialité et d'accessibilité. Du point de vue de la convivialité, le fait que l'élément déclencheur de l'onglet actuellement affiché ne soit pas immédiatement visible (car il se trouve dans le menu déroulant fermé) peut prêter à confusion. Du point de vue de l'accessibilité, il n'existe actuellement aucun moyen sensé de mapper ce type de construction à un modèle WAI ARIA standard, ce qui signifie qu'il ne peut pas être facilement rendu compréhensible pour les utilisateurs de technologies d'assistance.

Il s'agit d'un espace réservé au contenu associé à l'onglet Accueil. Cliquer sur un autre onglet basculera la visibilité de celui-ci pour le suivant. L'onglet JavaScript permute les classes pour contrôler la visibilité et le style du contenu. Vous pouvez l'utiliser avec des onglets, des pilules et toute autre navigation alimentée par .nav.

Il s'agit d'un espace réservé au contenu associé à l'onglet Profil. Cliquer sur un autre onglet basculera la visibilité de celui-ci pour le suivant. L'onglet JavaScript permute les classes pour contrôler la visibilité et le style du contenu. Vous pouvez l'utiliser avec des onglets, des pilules et toute autre navigation alimentée par .nav.

Il s'agit d'un espace réservé au contenu associé à l'onglet Contact. Cliquer sur un autre onglet basculera la visibilité de celui-ci pour le suivant. L'onglet JavaScript permute les classes pour contrôler la visibilité et le style du contenu. Vous pouvez l'utiliser avec des onglets, des pilules et toute autre navigation alimentée par .nav.

<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">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Pour vous aider à répondre à vos besoins, cela fonctionne avec le balisage basé sur <ul>-comme indiqué ci-dessus, ou avec n'importe quel balisage arbitraire "roll your own". Notez que si vous utilisez <nav>, vous ne devez pas lui ajouter directement role="tablist" car cela remplacerait le rôle natif de l'élément en tant que point de repère de navigation. Au lieu de cela, passez à un élément alternatif (dans l'exemple ci-dessous, un simple <div>) et enroulez le <nav> autour de lui.

<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">Profile</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>
  </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">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Le plugin tabs fonctionne également avec les pilules.

<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">Profile</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>
</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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Et avec des pilules verticales..

<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">Profile</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">Messages</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">Settings</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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Utilisation des attributs de données

Vous pouvez activer une navigation par onglets ou pilules sans écrire de code JavaScript en spécifiant simplement data-bs-toggle="tab" ou data-bs-toggle="pill" sur un élément. Utilisez ces attributs de données sur .nav-tabs ou .nav-pills.

<!-- 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">Profile</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">Messages</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">Settings</button>
  </li>
</ul>

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

Via JavaScript

Activer les onglets tabulables via JavaScript (chaque onglet doit être activé individuellement) :

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Vous pouvez activer des onglets individuels de plusieurs manières :

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Effet fondu

Pour faire apparaître les onglets en fondu, ajoutez .fade à chaque .tab-pane. Le premier volet d'onglet doit également avoir .show pour rendre visible le contenu initial.

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

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition. Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine. De plus, un appel de méthode sur un composant en transition sera ignoré.

Consultez notre documentation JavaScript pour plus d'informations..

Constructeur

Active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir soit un data-bs-target ou, si vous utilisez un lien, un attribut href, ciblant un nœud de conteneur dans le DOM.

<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">Profile</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">Messages</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">Settings</button>
  </li>
</ul>

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

Afficher

Sélectionne l'onglet donné et affiche son volet associé. Tout autre onglet précédemment sélectionné devient désélectionné et son volet associé est masqué. Renvoie à l'appelant avant que le volet d'onglet n'ait été réellement affiché (c'est-à-dire avant que l'événement montré shown.bs.tab ne se produise).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

Disposer

Détruit l'onglet d'un élément.

getInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Méthode statique qui vous permet d'obtenir l'instance d'onglet associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Evènements

Lors de l'affichage d'un nouvel onglet, les événements se déclenchent dans l'ordre suivant :

hide.bs.tab (sur l'onglet actuellement actif)
show.bs.tab (sur l'onglet à afficher)
hidden.bs.tab (sur l'onglet actif précédent, le même que pour l' hide.bs.tab événement)
shown.bs.tab (sur l'onglet nouvellement actif qui vient d'être affiché, le même que pour l'show.bs.tab événement)

Si aucun onglet n'était déjà actif, les événements hide.bs.tab et hidden.bs.tab ne seront pas déclenchés.

Type d'évènement	Description
`show.bs.tab`	Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez `event.target` et `event.relatedTarget` pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`shown.bs.tab`	Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez `event.target` et `event.relatedTarget` pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`hide.bs.tab`	Cet événement se déclenche lorsqu'un nouvel onglet doit être affiché (et donc l'onglet actif précédent doit être masqué). Utilisez `event.target` et `event.relatedTarget` pour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif.
`hidden.bs.tab`	Cet événement se déclenche après l'affichage d'un nouvel onglet (et donc l'onglet actif précédent est masqué). Utilisez `event.target` et `event.relatedTarget` pour cibler respectivement l'onglet actif précédent et le nouvel onglet actif.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

Bootstrap 5.2 | Composants

Navs et onglets