ComposantsJavaScript requis

Navigation et onglets

Le composant .nav structure des listes de liens : menus de section, onglets, pilules. Avec un peu de JavaScript, les onglets affichent un panneau de contenu à la fois.

Une liste .nav contient des éléments .nav-item et des liens .nav-link. Marquez le lien courant avec .active et aria-current, et désactivez un lien avec .disabled.

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Comptes</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Cartes</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Crédits</a></li>
  <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Assurances</a></li>
</ul>

Alignement et orientation#

.nav est un conteneur flex : utilisez justify-content-center ou justify-content-end pour l’alignement, flex-column pour une liste verticale, et une classe responsive (flex-column flex-sm-row) pour empiler les liens sur petit écran.

Centré
Lien

<ul class="nav justify-content-center mb-3">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Centré</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>
<ul class="nav justify-content-end mb-3">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">À droite</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>
<ul class="nav flex-column mb-3">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Vertical</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>
<ul class="nav flex-column flex-sm-row">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Vertical sur mobile</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>

Style onglets#

Ajoutez .nav-tabs pour obtenir des onglets avec une bordure basse. Seul l’onglet actif fusionne avec le contenu.

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Résumé</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Opérations</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Relevés</a></li>
  <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Chèques</a></li>
</ul>

Style pilules#

.nav-pills met en valeur l’élément actif avec un fond plein (bleu BDU par défaut).

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Tous</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Débits</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Crédits</a></li>
  <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Archivés</a></li>
</ul>

Style souligné#

.nav-underline remplace le fond par un trait sous le lien actif. La distance entre les liens se règle avec --bs-nav-underline-gap.

<ul class="nav nav-underline">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Épargne</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Prêts</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Assurances</a></li>
</ul>

Largeur : remplir ou égaliser#

.nav-fill répartit l’espace restant entre les liens (largeurs proportionnelles au contenu). .nav-justified donne la même largeur à chacun.

<ul class="nav nav-pills nav-fill mb-3">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Actif</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Un lien plus long</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Actif</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Un lien plus long</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>

Onglets avec panneaux#

Pour que les onglets affichent du contenu, utilisez role="tablist", des boutons data-bs-toggle="tab" ciblant chacun un .tab-pane, et un conteneur .tab-content. Ajoutez .fade aux panneaux pour une transition douce.

Solde disponible : 1 250 000 FCFA.

3 opérations ce mois-ci : un virement, un retrait et un paiement par carte.

Téléchargez votre relevé d'identité bancaire en agence ou en ligne.

Les archives de plus de cinq ans.

<ul class="nav nav-tabs" id="onglets-compte" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="onglet-resume" data-bs-toggle="tab" data-bs-target="#panneau-resume" type="button" role="tab" aria-controls="panneau-resume" aria-selected="true">Résumé</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="onglet-operations" data-bs-toggle="tab" data-bs-target="#panneau-operations" type="button" role="tab" aria-controls="panneau-operations" aria-selected="false">Opérations</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="onglet-rib" data-bs-toggle="tab" data-bs-target="#panneau-rib" type="button" role="tab" aria-controls="panneau-rib" aria-selected="false">RIB</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="onglet-archive" data-bs-toggle="tab" data-bs-target="#panneau-archive" type="button" role="tab" aria-controls="panneau-archive" aria-selected="false" disabled>Archives</button>
  </li>
</ul>
<div class="tab-content border border-top-0 p-3" id="contenu-onglets-compte">
  <div class="tab-pane fade show active" id="panneau-resume" role="tabpanel" aria-labelledby="onglet-resume" tabindex="0">
    <p class="mb-0">Solde disponible : 1 250 000 FCFA.</p>
  </div>
  <div class="tab-pane fade" id="panneau-operations" role="tabpanel" aria-labelledby="onglet-operations" tabindex="0">
    <p class="mb-0">3 opérations ce mois-ci : un virement, un retrait et un paiement par carte.</p>
  </div>
  <div class="tab-pane fade" id="panneau-rib" role="tabpanel" aria-labelledby="onglet-rib" tabindex="0">
    <p class="mb-0">Téléchargez votre relevé d'identité bancaire en agence ou en ligne.</p>
  </div>
  <div class="tab-pane fade" id="panneau-archive" role="tabpanel" aria-labelledby="onglet-archive" tabindex="0">
    <p class="mb-0">Les archives de plus de cinq ans.</p>
  </div>
</div>

Pilules verticales#

Combinez .nav-pills.flex-column et une grille pour un menu latéral : la liste à gauche, les panneaux à droite. Ajoutez aria-orientation="vertical" pour que les flèches haut et bas changent d’onglet.

Frais de tenue de compte : 1 500 FCFA par mois.

Taux annuel de 3,5 %, versements libres.

Plafond de retrait : 500 000 FCFA par jour.

<div class="row g-3">
  <div class="col-md-4">
    <div class="nav flex-column nav-pills" id="nav-pilules-verticales" role="tablist" aria-orientation="vertical">
      <button class="nav-link active text-start" id="pilule-courant" data-bs-toggle="pill" data-bs-target="#pilule-panneau-courant" type="button" role="tab" aria-controls="pilule-panneau-courant" aria-selected="true">Compte courant</button>
      <button class="nav-link text-start" id="pilule-epargne" data-bs-toggle="pill" data-bs-target="#pilule-panneau-epargne" type="button" role="tab" aria-controls="pilule-panneau-epargne" aria-selected="false">Compte épargne</button>
      <button class="nav-link text-start" id="pilule-carte" data-bs-toggle="pill" data-bs-target="#pilule-panneau-carte" type="button" role="tab" aria-controls="pilule-panneau-carte" aria-selected="false">Carte bancaire</button>
    </div>
  </div>
  <div class="col-md-8">
    <div class="tab-content" id="pilules-contenu">
      <div class="tab-pane fade show active" id="pilule-panneau-courant" role="tabpanel" aria-labelledby="pilule-courant" tabindex="0">Frais de tenue de compte : 1 500 FCFA par mois.</div>
      <div class="tab-pane fade" id="pilule-panneau-epargne" role="tabpanel" aria-labelledby="pilule-epargne" tabindex="0">Taux annuel de 3,5 %, versements libres.</div>
      <div class="tab-pane fade" id="pilule-panneau-carte" role="tabpanel" aria-labelledby="pilule-carte" tabindex="0">Plafond de retrait : 500 000 FCFA par jour.</div>
    </div>
  </div>
</div>

Liste de liens comme onglets#

Un groupe de liste peut piloter des panneaux avec data-bs-toggle="list" : pratique pour un menu compact.

Plateau Cocody

Agence du Plateau : du lundi au vendredi, de 8 h à 16 h.

Agence de Cocody : du lundi au samedi, de 8 h à 13 h.

<div class="row g-3">
  <div class="col-md-4">
    <div class="list-group" id="liste-agences" role="tablist">
      <a class="list-group-item list-group-item-action active" id="liste-plateau" data-bs-toggle="list" href="#liste-panneau-plateau" role="tab" aria-controls="liste-panneau-plateau">Plateau</a>
      <a class="list-group-item list-group-item-action" id="liste-cocody" data-bs-toggle="list" href="#liste-panneau-cocody" role="tab" aria-controls="liste-panneau-cocody">Cocody</a>
    </div>
  </div>
  <div class="col-md-8">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="liste-panneau-plateau" role="tabpanel" aria-labelledby="liste-plateau" tabindex="0">Agence du Plateau : du lundi au vendredi, de 8 h à 16 h.</div>
      <div class="tab-pane fade" id="liste-panneau-cocody" role="tabpanel" aria-labelledby="liste-cocody" tabindex="0">Agence de Cocody : du lundi au samedi, de 8 h à 13 h.</div>
    </div>
  </div>
</div>

Utilisation en JavaScript#

Affichez un onglet depuis le code, ou réagissez à un changement d’onglet. Les événements sont émis sur le bouton de l’onglet.

const onglet = document.querySelector('#onglet-operations');
bootstrap.Tab.getOrCreateInstance(onglet).show();

onglet.addEventListener('shown.bs.tab', (evenement) => {
  // evenement.target : onglet activé ; evenement.relatedTarget : onglet précédent
  console.log('Onglet affiché : ' + evenement.target.textContent);
});

Classes

Classes
Classe	Rôle
`.nav`	Conteneur flex des liens.
`.nav-item`	Élément de liste (facultatif si les liens sont directement dans `.nav`).
`.nav-link`	Lien ou bouton de navigation.
`.nav-tabs`, `.nav-pills`, `.nav-underline`	Styles : onglets, pilules, souligné.
`.nav-fill`, `.nav-justified`	Répartition de la largeur : proportionnelle ou égale.
`.active`, `.disabled`	États d’un lien ou d’un bouton.
`.tab-content`	Conteneur des panneaux.
`.tab-pane`	Un panneau ; `.active` (et `.show` avec `.fade`) pour celui affiché au départ.

Méthodes

Méthodes
Méthode	Description
`show()`	Affiche l’onglet et son panneau, et masque l’onglet actif.
`dispose()`	Détruit l’instance.
`bootstrap.Tab.getInstance(element)`	Renvoie l’instance liée à l’onglet, ou `null`.
`bootstrap.Tab.getOrCreateInstance(element)`	Renvoie l’instance, ou la crée.

Événements

Les quatre événements sont émis sur les boutons d’onglet. Dans l’ordre : hide et show (annulables), puis hidden et shown. relatedTarget désigne l’onglet précédent ou suivant selon l’événement.

Événements
Événement	Déclenché quand
`show.bs.tab`	Un nouvel onglet va être affiché (sur le nouvel onglet).
`shown.bs.tab`	Le nouvel onglet est affiché.
`hide.bs.tab`	L’onglet actif va être masqué (sur l’onglet actif).
`hidden.bs.tab`	L’ancien onglet est masqué.

Attributs data-bs-*

Attributs data-bs-*
Attribut	Élément	Effet
`data-bs-toggle="tab"`	Bouton ou lien	Fait de l’élément un onglet qui affiche son panneau.
`data-bs-toggle="pill"`	Bouton ou lien	Équivalent de `tab`, pour des pilules.
`data-bs-toggle="list"`	Élément de groupe de liste	Équivalent de `tab`, pour un groupe de liste.
`data-bs-target="#id"`	Bouton	Sélecteur du panneau (pour un lien, `href` suffit).

Variables Sass

Variables Sass
Variable	Valeur par défaut
`$nav-link-padding-y`	`.5rem`
`$nav-link-padding-x`	`1rem`
`$nav-link-font-size`	`null`
`$nav-link-font-weight`	`null`
`$nav-link-color`	`var(--bs-link-color)`
`$nav-link-hover-color`	`var(--bs-link-hover-color)`
`$nav-link-disabled-color`	`var(--bs-secondary-color)`
`$nav-tabs-border-color`	`var(--bs-border-color)`
`$nav-tabs-border-radius`	`var(--bs-border-radius)`
`$nav-tabs-link-active-color`	`var(--bs-emphasis-color)`
`$nav-tabs-link-active-bg`	`var(--bs-body-bg)`
`$nav-pills-border-radius`	`var(--bs-border-radius)`
`$nav-pills-link-active-color`	`$component-active-color`
`$nav-pills-link-active-bg`	`$component-active-bg`
`$nav-underline-gap`	`1rem`
`$nav-underline-border-width`	`.125rem`
`$nav-underline-link-active-color`	`var(--bs-emphasis-color)`

Personnalisation#

Les variables CSS --bs-nav-* se surchargent sur le .nav concerné.

// Sass : liens plus compacts, pilules vertes
$nav-link-padding-y: 0.375rem;
$nav-link-padding-x: 0.75rem;
$nav-pills-link-active-bg: $success;

// CSS : un menu précis
.menu-compte {
  --bs-nav-link-padding-x: 0.75rem;
  --bs-nav-link-color: #1f2a37;
  --bs-nav-link-hover-color: #2B62AA;
  --bs-nav-underline-gap: 1.5rem;
}

Bonnes pratiques

À faire

Utilisez des liens (<a>) pour naviguer vers d’autres pages et des boutons (<button>) pour les onglets qui changent de panneau.
Donnez des libellés courts et distincts à chaque onglet.
Affichez au départ l’onglet le plus utile, avec .active sur le bouton et .show.active sur son panneau.
Choisissez un seul style (onglets, pilules ou souligné) par ensemble de navigation.

À éviter

N’utilisez pas d’onglets pour une suite d’étapes à parcourir dans l’ordre : préférez une barre de progression et des étapes.
Ne cachez pas de contenu essentiel derrière un onglet secondaire.
Ne mélangez pas dans un même ensemble des liens de navigation et des onglets de panneau.

Accessibilité

Pour des onglets, appliquez role="tablist" sur la liste, role="tab" avec aria-controls et aria-selected sur les boutons, et role="tabpanel" avec aria-labelledby sur les panneaux.
Avec des <li> autour des boutons, ajoutez role="presentation" pour ne pas perturber la structure de la liste d’onglets.
Au clavier, Tab atteint l’onglet actif ; les flèches (gauche/droite, ou haut/bas avec aria-orientation="vertical"), Début et Fin déplacent la sélection.
Ajoutez tabindex="0" à un panneau qui ne contient aucun élément focalisable, pour que le clavier puisse l’atteindre.
Pour un onglet désactivé, utilisez l’attribut disabled d’un bouton, ou .disabled et aria-disabled="true" sur un lien.