Navbar

La navbar de Bootstrap permet de simplifier la navigation d'un site en offrant plusieurs options de configurations.

Pour définir une navbar, il faut ajouter la classe Bootstrap .navbar à une balise HTML. Idéalement une balise <nav>, afin de maximiser l'aspect sémantique de cette composante.

Par exemple:

<nav class="navbar">...</nav>

Thème de couleur

L'une de ces configurations consiste à sélectionner le thème de couleur de la navbar en fonction de la couleur de fond attribuée en CSS (si une couleur a été attribuée).

Si par exemple la couleur de fond est pâle, la classe .navbar-light doit être utilisée. À l'opposée, .navbar-dark sera la meilleure option si cette couleur est foncée.

Cette classe change la couleur des éléments de la navbar afin de maximiser leur contraste avec la couleur de fond. Si aucune couleur n'a été attribuée, la meilleure option est .navbar-light afin de contraster avec le fond de page blanc par défaut.

Par exemple:

<nav class="navbar navbar-light">...</nav>

Changement d'affichage

Une autre des configurations importantes consiste à spécifier à quel breakpoint la navbar doit passer de son affichage compact, en menu hamburger ☰, à l'affichage étendu, en barre de navigation complète.

Ce changement d'affichage est spécifier grâce à une classe ayant le format suivant .navbar-expand-[breakpoint]. Bref, l'affichage étendu deviendra actif lorsque ce breakpoint sera atteint.

Par exemple, pour afficher une barre de navigation complète à partir de lg:

<nav class="navbar navbar-light navbar-expand-lg">...</nav>

Conteneur

Afin de gérer adéquatement la position des éléments dans la navbar, il faut ajouter un conteneur Bootstrap dans celle-ci, soit container ou container-fluid, selon la largeur désirée.

<nav class="navbar navbar-light navbar-expand-lg">
  <div class="container">...</div>
</nav>

Hamburger 🍔

Pour que la navbar puisse masquer les éléments de navigation lorsque le menu hamburger ☰ est affiché, il faut regrouper ces éléments dans une balise avec les classes .collapse.navbar-collapse comme suit:

<nav class="navbar navbar-light navbar-expand-lg">
  <div class="container-fluid">
    <div id="mainNav" class="collapse navbar-collapse">
      ...
    </div>
  </div>
</nav>

Évidemment pour être en mesure d'ouvrir/masquer la navigation, un bouton est nécessaire, le fameux hamburger button ☰.

Bootstrap nomme cet élément le: "Toggler". Il faut donc insérer un toggler dans la navbar et lui spécifier, via ses attributs, la navigation qu'il doit ouvrir/masquer.

Dans l'exemple ci-dessous, les attributs data-bs-target et aria-controls indiquent à Bootstrap que ce bouton contrôle l'élément avec le id mainNav.

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Affichage/masquage de la navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Navigation

Il faut maintenant ajouter la liste de liens constituant la navigation en soi.

Pour ce faire, il faut créer:

  1. Une liste <ul> avec la classe .navbar-nav dans la balise .collapse.navbar-collapse.

  2. Des items de liste <li> avec la classe .nav-item.

  3. Des liens <a> dans chaque item avec la classe .nav-link.

Par exemple:

<nav class="navbar navbar-light navbar-expand-lg">
  <div class="container">
    <!-- Hamburger button -->
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Affichage/masquage de la navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- Navigation -->
    <div id="mainNav" class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="page-1.html" class="nav-link">Page 1</a>
        </li>
        <li class="nav-item">
          <a href="page-2.html" class="nav-link">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Afin de différencier la page courante des autres, il est possible d'ajouter la classe .active au lien correspondant à cette page.

Par exemple:

<a href="page-1.html" class="nav-link active">Page 1</a>

Menu déroulant

Pour obtenir un menu déroulant, communément appelé "dropdown", il faut bonifier un li.nav-item avec la classe .dropdown, ainsi que le a.nav-link à l'intérieur de celui-ci avec la classe .dropdown-toggle et l'attribut data-bs-toggle="dropdown".

Le lien maintenant converti, il faut ajouter les éléments du menu déroulant grâce à une liste ul.dropdown-menu contenant les différents liens souhaités dropdown-item.

Par exemple:

<li class="nav-item dropdown">
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Page 1</a>

  <ul class="dropdown-menu">
    <li>
      <a href="page-1.html" class="dropdown-item">Sous-menu 1</a>
    </li>
    <li>
      <a href="page-2.html" class="dropdown-item">Sous-menu 2</a>
    </li>
  </ul>
</li>

Les navbars offrent la possibilité d'ajouter un logo sous forme de texte ou d'image dans la barre de navigation. Cette option est appelée Brand. Pour ce faire, il suffit d'ajouter la classe .navbar-brand sur une balise HTML à l'extérieur du .collapse.navbar-collapse.

Par exemple:

<a class="navbar-brand" href="index.html">Nom de mon site</a>

Positionnement

Bootstrap offre des utilitaires de positionnement qui ne sont pas limités qu'à la composante de navbar, mais qui peuvent s'avérer très utiles avec celle-ci. Pour les utiliser, il suffit d'ajouter la classe désirée à la navbar.

  • fixed-top fige la navbar au sommet de la page.

  • fixed-bottom fige la navbar au bas de la page.

  • sticky-top laisse la navbar défiler avec la page jusqu'à ce que celle-ci atteigne le sommet de la page.

Par exemple pour une navbar figée au haut de la page.

<nav class="navbar navbar-light fixed-top">...</nav>