Skip to Content
BootstrapPartie 5 — Navigation & overlays5.2 — Nav, tabs, pagination, breadcrumb

5.2 — Nav, tabs, pagination, breadcrumb

⏱️ TL;DR — .nav est la base des navigations en ligne (nav-tabs pour des onglets, nav-pills pour des pilules). Avec data-bs-toggle="tab", les onglets basculent des panneaux (tab-content/tab-pane). .pagination pagine ; .breadcrumb affiche un fil d’Ariane.

🎯 Objectifs

  • Créer onglets et pilules.
  • Faire basculer des panneaux de contenu (tabs JS).
  • Ajouter pagination et fil d’Ariane.
<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Actif</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Lien</a></li>
</ul>

Variantes : nav-tabs (onglets), nav-pills (pilules), nav-fill / nav-justified (répartition), flex-column (vertical).

Onglets avec panneaux (JS)

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#t1"
            type="button" role="tab">Onglet 1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#t2"
            type="button" role="tab">Onglet 2</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="t1" role="tabpanel">Contenu 1</div>
  <div class="tab-pane fade" id="t2" role="tabpanel">Contenu 2</div>
</div>

data-bs-toggle="tab" relie chaque bouton (via data-bs-target) à son tab-pane.

Pagination

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link">Préc.</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Suiv.</a></li>
  </ul>
</nav>

Tailles : pagination-lg, pagination-sm. Alignement via utilitaires flex (justify-content-center).

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
    <li class="breadcrumb-item"><a href="#">Produits</a></li>
    <li class="breadcrumb-item active" aria-current="page">Chaussures</li>
  </ol>
</nav>

Le séparateur se personnalise avec la variable CSS --bs-breadcrumb-divider.

⚠️ Piège — Pour les onglets JS, chaque data-bs-target doit pointer vers l’id exact d’un tab-pane. Un seul panneau doit porter show active au départ, sinon deux contenus s’affichent en même temps.

💡 Pour un dev React — Les tabs data-bs-toggle fonctionnent, mais en React on gère souvent l’onglet actif par l’état et on affiche conditionnellement le panneau — ou on utilise <Tabs>/<Tab> de react-bootstrap. Cela évite les problèmes de synchro DOM/état.

✏️ Exercices

  1. Trois onglets qui basculent trois panneaux, le premier actif.

✅ Solution

Reprendre le markup « onglets avec panneaux » avec un 3e bouton data-bs-target="#t3" et un tab-pane#t3. Seul #t1 porte show active.

  1. Une pagination centrée horizontalement.

✅ Solution

<ul class="pagination justify-content-center">…</ul>.

🧠 Quiz de révision

1. Quelle classe transforme une nav en onglets ?

nav-tabs.

2. Quel attribut fait basculer les panneaux d’onglets ?

data-bs-toggle="tab" (+ data-bs-target).

3. Quelle classe pour l’item de page courant ?

active sur le page-item.

4. Comment marquer la page courante d’un breadcrumb ?

class="active" aria-current="page".

5. Comment changer le séparateur d’un breadcrumb ?

Via la variable CSS --bs-breadcrumb-divider.

Chapitre suivant : 5.3 — Dropdowns

5.1 — Navbar5.3 — Dropdowns