Navs et onglets

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 .navclasse de base aux états actif et désactivé. Échangez les classes de modificateurs pour basculer entre chaque style.

Le .navcomposant de base 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 .navcomposant de base n'inclut aucun .activeétat. Les exemples suivants incluent la classe, principalement pour démontrer que cette classe particulière ne déclenche aucun style particulier.

Pour transmettre l'état actif aux technologies d'assistance, utilisez l' aria-currentattribut — en utilisant la pagevaleur de la page actuelle ou truede l'élément actuel dans un ensemble.

html

<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 <ul>des s comme ci-dessus, <ol>si l'ordre de vos articles est important, ou roulez les vôtres avec un <nav>élément. Parce que les .navutilisations 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.

html

<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 .navcomposant s 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 flexbox . 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.

Centré avec .justify-content-center:

html

<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>

Aligné à droite avec.justify-content-end :

html

<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' .flex-columnutilitaire. Besoin de les empiler sur certaines fenêtres mais pas sur d'autres ? Utilisez les versions réactives (par exemple, .flex-sm-column).

html

<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 <ul>également possible sans s.

html

<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 d'en haut et ajoute la .nav-tabsclasse pour générer une interface à onglets. Utilisez-les pour créer des régions tabulables avec notre plugin JavaScript tab .

html

<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 ce même code HTML, mais utilisez à la .nav-pillsplace :

html

<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 .navcontenu de votre à étendre toute la largeur disponible à l'une des deux classes de modificateurs. Pour remplir proportionnellement tout l'espace disponible avec vos .nav-items, 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.

html

<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="#">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>

Lorsque vous utilisez une <nav>navigation basée sur -, vous pouvez omettre en toute sécurité .nav-itemcar .nav-linkcela n'est nécessaire que pour les éléments de style <a>.

html

<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 à ce .nav-fillqui précède, chaque élément de navigation aura la même largeur.

html

<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>

Similaire à l' .nav-fillexemple utilisant une <nav>navigation basée sur -.

html

<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 flexbox . 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.

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="#">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 <nav>élément autour de l'ensemble de la navigation. N'ajoutez pas le rôle au lui- <ul>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 .nav-tabsclasse, ne doivent pas recevoir de role="tablist", role="tab"ni d' role="tabpanel"attributs. Ceux-ci ne sont appropriés que pour les interfaces à onglets dynamiques, comme décrit dans le modèle d'onglets ARIA Authoring Practices Guide . Voir Comportement JavaScript pour les interfaces à onglets dynamiques dans cette section pour un exemple. L' aria-currentattribut 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 HTML supplémentaire et le plugin JavaScript pour les listes déroulantes .

Onglets avec listes déroulantes

html

<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

html

<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>

CSS

variables

Ajouté dans v5.2.0

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les navs utilisent désormais des variables CSS locales sur .nav, .nav-tabset .nav-pillspour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

Sur la .navclasse de base :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Sur la .nav-tabsclasse de modificateur :

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Sur la .nav-pillsclasse de modificateur :

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Variables SSS

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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 tab - incluez-le individuellement ou via le bootstrap.jsfichier compilé - pour étendre nos onglets et pilules de navigation afin de créer des volets tabulables de contenu local.

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 .navnavigation alimentée.

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 .navnavigation alimentée.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<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">Profile</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>Disabled</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>

Pour vous aider à répondre à vos besoins, cela fonctionne avec <ul>le balisage basé sur -, comme indiqué ci-dessus, ou avec n'importe quel balisage arbitraire "roll your own". Notez que si vous utilisez <nav>, vous ne devez pas y ajouter role="tablist"directement, 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.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<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>
    <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>Disabled</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>

Le plugin tabs fonctionne également avec les pilules.

This is some placeholder content the Disabled tab's associated content.

<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>
  <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>Disabled</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>

Et avec des pilules verticales. Idéalement, pour les onglets verticaux, vous devez également ajouter aria-orientation="vertical"au conteneur de la liste des onglets.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<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-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>Disabled</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" 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>

Accessibilité

Les interfaces à onglets dynamiques, telles que décrites dans le modèle d'onglets ARIA Authoring Practices Guide , nécessitent role="tablist", role="tab", role="tabpanel"et des aria-attributs supplémentaires afin de transmettre leur structure, leurs fonctionnalités et leur état actuel aux utilisateurs de technologies d'assistance (telles que les lecteurs d'écran). Comme meilleure pratique, nous vous recommandons d'utiliser des <button>éléments 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.

Conformément au modèle ARIA Authoring Practices, seul l'onglet actuellement actif reçoit le focus du clavier. Lorsque le plugin JavaScript est initialisé, il sera défini tabindex="-1"sur tous les contrôles d'onglet inactifs. Une fois que l'onglet actuellement actif a le focus, les touches du curseur activent l'onglet précédent/suivant, le plug-in modifiant l' itinérance entabindex conséquence. Cependant, notez que le plugin JavaScript ne fait pas la distinction entre les listes d'onglets horizontales et verticales lorsqu'il s'agit d'interactions avec les touches du curseur : quelle que soit l'orientation de la liste d'onglets, les curseurs haut et gauche vont à l'onglet précédent, et les curseurs bas et droit vont à l'onglet suivant.

En général, pour faciliter la navigation au clavier, il est recommandé de rendre également les panneaux d'onglets eux-mêmes focalisables, à moins que le premier élément contenant du contenu significatif à l'intérieur du panneau d'onglets ne soit déjà focalisable. Le plugin JavaScript n'essaie pas de gérer cet aspect - le cas échéant, vous devrez explicitement rendre vos panneaux d'onglets focalisables en ajoutant tabindex="0"votre balisage.

Le plug-in JavaScript pour onglets ne prend pas en charge les interfaces à onglets contenant des menus déroulants, car ceux-ci entraînent à la fois des problèmes d'utilisation 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.

Utilisation des attributs de données

Vous pouvez activer une navigation par onglets ou pilules sans écrire de 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-tabsou .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" 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

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

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

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

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

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

const 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à chacun .tab-pane. Le premier volet d'onglet doit également .showrendre visible le contenu initial.

<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>

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 .

Active votre contenu en tant qu'élément d'onglet.

Vous pouvez créer une instance d'onglet avec le constructeur, par exemple :

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

Méthode	La description
`dispose`	Détruit l'onglet d'un élément.
`getInstance`	Méthode statique qui permet d'obtenir l'instance de tabulation associée à un élément DOM, vous pouvez l'utiliser comme ceci : `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Méthode statique qui renvoie une instance d'onglet associée à un élément DOM ou en crée une nouvelle au cas où elle n'aurait pas été initialisée. Vous pouvez l'utiliser comme ceci : `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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é. Revient à l'appelant avant que le volet d'onglet ne soit réellement affiché (c'est-à-dire avant que l' `shown.bs.tab`événement ne se produise).

Évé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.tabet hidden.bs.tabne seront pas déclenchés.

Type d'événement	La description
`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.
`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).

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