Créer une barre latérale (sidebar) responsive et transformable en navbar avec Bootstrap ?

La librairie fournit toute une collection de composants pour créer des interfaces pouvant s'adapter à l'écran sur lequel elles sont affichées. Le système de grille combiné à l'utilisation de classes permet d'obtenir l'affichage que l'on souhaite, sur un ordinateur ou un smartphone. Il est ainsi possible par exemple de mettre en place une barre de navigation latérale qui change de position pour passer en haut lors de l'affichage sur un petit écran.

Le fonctionnement modulaire de Bootstrap permet d'utiliser certaines classes uniquement selon une taille minimale. C'est cette technique qui va être utilisée pour afficher la barre latérale. L'affichage va être réparti sur une ligne avec deux éléments : le menu (dans la balise <aside>) et le contenu principal (dans la balise <main>).

Pour indiquer la place que prend la colonne, les classes "col-12" et "col-md-2" vont être utilisées. La première indique que la barre prend la totalité de l'écran tandis que la deuxième indique que le menu occupe 1/6ème de la grille, à condition que la largeur de l'écran soit supérieure ou égale à 768px. Le même système détermine le sens d'affichage du menu. La classe "flex-row" indique un affichage en ligne et la classe "flex-md-column" indique un affichage en colonne dans le cas d'un affichage sur un grand écran. Les classes "navbar" et "navbar-expand" permettent de créer à partir de la liste HTML une barre de navigation responsive. Il faudra également les classes "navbar-collapse", "navbar-nav" et "nav-item" pour afficher les différents éléments du menu de navigation.

Pour le contenu, on utilise seulement la classe "col". Elle va indiquer au contenu principal de prendre la place restante laissée par la barre de navigation.

<div class="container-fluid h-100">
  <div class="row h-100">
    <aside class="col-12 col-md-2 p-0 bg-dark">
      <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
        <div class="collapse navbar-collapse">
          <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
            <li class="nav-item">
               <a class="nav-link pl-0" href="#">Menu 1</a>
            </li>
            <!-- Insérez ici le reste de votre menu -->            
          </ul>
        </div>
      </nav>
    </aside>
    <main class="col">
      <!-- Insérez ici le contenu principal du site ou de l'application -->
    </main>
  </div>
</div>