Skip to Content
BootstrapPartie 5 — Navigation & overlays5.1 — Navbar

5.1 — Navbar

⏱️ TL;DR — La navbar combine navbar + navbar-expand-{bp} (à partir de quel écran le menu se déplie), une navbar-brand, un navbar-toggler (burger) qui pilote un collapse, et des nav-item/nav-link. La couleur se règle avec data-bs-theme="dark" + une classe de fond (bg-*).

🎯 Objectifs

  • Construire une navbar responsive complète.
  • Gérer le menu burger (collapse).
  • Colorer et positionner la navbar.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MonSite</a>
 
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#nav"
            aria-controls="nav" aria-expanded="false" aria-label="Menu">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Accueil</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Produits</a></li>
        <li class="nav-item"><a class="nav-link disabled">Bientôt</a></li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Rechercher">
        <button class="btn btn-outline-success" type="submit">Go</button>
      </form>
    </div>
  </div>
</nav>

Décryptage :

  • navbar-expand-lg : le menu est déplié dès lg, et replié en burger en dessous.
  • navbar-toggler + data-bs-target="#nav" : le burger ouvre/ferme le collapse d’id nav.
  • me-auto pousse la barre de recherche à droite.

Couleurs

<!-- barre sombre -->
<nav class="navbar bg-dark" data-bs-theme="dark">…</nav>
<!-- barre colorée -->
<nav class="navbar bg-primary" data-bs-theme="dark">…</nav>

Depuis la 5.3, on utilise data-bs-theme="dark" (ou light) pour adapter les couleurs de texte, au lieu des anciennes classes navbar-dark/navbar-light.

Position

<nav class="navbar sticky-top …">…</nav>   <!-- colle en haut au scroll -->
<nav class="navbar fixed-top …">…</nav>     <!-- fixe en haut -->
<a class="navbar-brand" href="#">
  <img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
  MonSite
</a>

⚠️ Piège — Oublier de faire correspondre data-bs-target="#nav" du toggler avec l’id="nav" du collapse. S’ils diffèrent, le burger ne fait rien. Ce composant nécessite le JS Bootstrap.

💡 Pour un dev React — La navbar collapse dépend du JS Bootstrap (collapse). En React, utilisez <Navbar> / <Navbar.Toggle> / <Navbar.Collapse> de react-bootstrap, qui gèrent l’état d’ouverture proprement sans data-attributes. Voir Partie 11.

✏️ Exercices

  1. Une navbar qui reste dépliée dès md et se replie en burger en dessous.

✅ Solution

Utiliser navbar-expand-md.

  1. Une navbar sombre, collante en haut, avec la marque à gauche et les liens à droite.

✅ Solution

<nav class="navbar navbar-expand-lg sticky-top bg-dark" data-bs-theme="dark"> + navbar-nav ms-auto.

🧠 Quiz de révision

1. Que contrôle navbar-expand-lg ?

Le breakpoint à partir duquel le menu se déplie (en dessous, il est en burger).

2. Quel élément déclenche le menu burger ?

navbar-toggler avec data-bs-toggle="collapse" et data-bs-target.

3. Comment rendre une navbar sombre en 5.3 ?

data-bs-theme="dark" (+ une classe de fond bg-*).

4. Comment pousser un élément à droite dans la navbar ?

ms-auto (ou me-auto sur l’élément de gauche).

5. La navbar responsive nécessite-t-elle du JS ?

Oui, pour le collapse du menu burger.

Chapitre suivant : 5.2 — Nav, tabs, pagination, breadcrumb

Vue d'ensemble5.2 — Nav, tabs, pagination, breadcrumb