Aller au contenu

Barre de navigation complète

Une barre de navigation complète traite l'affichage des éléments de navigation selon les tailles d'écrans.

  • Petits écrans : affichage de l'icône de buger
  • Autres tailles d'écrans : affichage en flex

Les barres de navigation Bootstrap sont bâties ainsi.

Où trouver l'information

Dans le menu Bootstrap :

Navbar

Barre de navigation de base

La barre de navigation de base comprend :

  • le parent navbar et à partir de quelle taille d'écran les éléments de menu seront affichés sur une ligne au lieu d'une colonne navbar-expand-md (md=medium)
  • un bloc container-fluid pour s'assurer que la barre prenne toujours 100% de la largeur
  • la zone de navigation navbar-nav
  • les liens de navigation nav-link

Exemple : 

  <nav class="navbar navbar-expand-md">
    <div class="container-fluid ">
      <div class="navbar-nav" id="barreNav">
          <a href="#" class="nav-link">Menu 1</a>
          <a href="#" class="nav-link">Menu 2</a>
          <a href="#" class="nav-link">Menu 3</a>
          <a href="#" class="nav-link">Menu 4</a>
          <a href="#" class="nav-link">
            <i class="fa-solid fa-cart-shopping"></i>
          </a>
      </div>
    </div>
  </nav>

Résultat dans le navigateur :

Navbar

Fonctionnement du burger

Fonctionnement voulu :

  • Sur petits écrans : afficher le burger et cacher les éléments de menu
  • Lorsque le burger est cliqué : afficher les éléments de menu

  • Sur autres tailles d'écran : cacher le burger et afficher les éléments de menu

  • La classe navbar-expand indiquée sur le parent plus haut indique déjà la taille d'écran minimale pour afficher les items de menu au lieu du burger

  • Ajouter un bouton qui va afficher l'icône de burger et agir comme élément cliquable pour afficher/cacher le menu sur petits écrans
  • Ajouter les classes qui vont dérouler le menu ou plier le menu losque le burger sera cliqué

Navbar

Navbar

Ajouter des styles supplémentaires

navbar

Fonctionnement voulu :

  • Afficher un logo dans la barre de navigation
  • Logo toujours visible, même lors de l'affichage en burger
  • La classe navbar-brand appliquée à un élément indique que c'est la marque de la compagnie à mettre en évidence

navbar

navbar

Aide Bootstrap sur les Navbar

https://getbootstrap.com/docs/5.3/components/navbar/