retour
01/04
section 01

Navbar responsive

Connectez-vous pour sauvegarder votre progression et acceder aux quiz
Se connecter

La navbar est le composant le plus utilise de Bootstrap. Elle gere automatiquement le menu hamburger sur mobile et offre de nombreuses options de personnalisation.

Navbar de base

html<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- Logo / Marque -->
    <a class="navbar-brand" href="#">MonSite</a>

    <!-- Bouton hamburger (visible sur mobile) -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Liens (collapses sur mobile) -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             data-bs-toggle="dropdown">
            Plus
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><a class="dropdown-item" href="#">FAQ</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Contact</a></li>
          </ul>
        </li>
      </ul>

      <!-- Formulaire de recherche -->
      <form class="d-flex">
        <input class="form-control me-2" type="search"
               placeholder="Rechercher...">
        <button class="btn btn-outline-light" type="submit">
          Rechercher
        </button>
      </form>
    </div>
  </div>
</nav>

Variantes de navbar

ClasseEffet
navbar-dark bg-darkTexte clair sur fond sombre
navbar-light bg-lightTexte sombre sur fond clair
navbar-expand-mdCollapse a partir de md (768px)
fixed-topFixee en haut (attention au padding body)
sticky-topCollante en haut au scroll

Navbar avec logo image

html<nav class="navbar navbar-expand-lg bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="#">
      <img src="logo.png" alt="Logo" height="40" class="me-2">
      <span class="fw-bold">MonSite</span>
    </a>
    <!-- ... -->
  </div>
</nav>
Point important : Si vous utilisez fixed-top, ajoutez un padding-top au body (environ 56px) pour eviter que le contenu soit cache derriere la navbar.