20 – Le composant Nav

Ce tutoriel Bootstrap 5 vous montre comment faire un menu de navigation. Nous verrons également comment réaliser un sous menu.

>> Le composant Navbar

Bienvenue dans cette nouvelle vidéo dédiée à notre formation sur Bootstrap. Si vous venez de nous rejoindre, je vous conseille de consulter la playlist afin de reprendre les tutoriels depuis le début, notamment pour apprendre comment installer Bootstrap. Comme d’habitude, j’ai créé un fichier nommé 19-composant-nav.html et installé Bootstrap. Aujourd’hui, nous allons explorer le composant nav pour créer un menu de navigation.

Création de l’En-tête et du Menu de Navigation

Pour commencer, nous allons créer l’entête d’une page en ajoutant une balise header. À l’intérieur, nous insérerons une div avec la classe container.

<header>
  <div class="container">
    <!-- Contenu ici -->
  </div>
</header>

Ensuite, dans cette div, nous allons débuter la construction de notre menu de navigation avec une balise nav, à l’intérieur de laquelle nous placerons des liens de navigation (a).

<nav class="nav">
  <a href="#" class="nav-link">Lien A</a>
  <a href="#" class="nav-link">Lien B</a>
  <a href="#" class="nav-link">Lien C</a>
  <a href="#" class="nav-link">Lien D</a>
</nav>

Personnalisation du Menu

Ajout de Styles et Désactivation d’un Lien

Pour améliorer la visibilité du menu, nous pouvons ajouter une classe de couleur de fond à notre header, comme bg-warning.

<header class="bg-warning">
  <div class="container">
    <nav class="nav">
      <a href="#" class="nav-link">Lien A</a>
      <a href="#" class="nav-link">Lien B</a>
      <a href="#" class="nav-link">Lien C</a>
      <a href="#" class="nav-link disabled">Lien D</a>
    </nav>
  </div>
</header>

Indication du Lien Actif

Pour indiquer quel lien est actif, nous pouvons ajouter la classe active au lien correspondant et personnaliser son style.

<a href="#" class="nav-link active">Lien A</a>
<style>
  .nav-link.active {
    color: red;
  }
</style>

Utilisation d’une Liste pour le Menu

Il est souvent recommandé d’utiliser des listes (ul, li) pour créer des menus de navigation. Voici comment nous pouvons adapter notre menu en utilisant cette structure.

<div class="container">
  <nav>
    <ul class="nav">
      <li><a href="#" class="nav-link">Lien A</a></li>
      <li><a href="#" class="nav-link">Lien B</a></li>
      <li><a href="#" class="nav-link">Lien C</a></li>
      <li><a href="#" class="nav-link">Lien D</a></li>
    </ul>
  </nav>
</div>

Nous pouvons également centrer ou aligner le menu à droite en utilisant les classes justify-content-center et justify-content-end.

<ul class="nav justify-content-center">
  <!-- Liens ici -->
</ul>
<ul class="nav justify-content-end">
  <!-- Liens ici -->
</ul>

Pour disposer le menu en colonne, nous ajoutons la classe flex-column.

<ul class="nav flex-column">
  <!-- Liens ici -->
</ul>

Création d’un Sous-menu

Pour créer un sous-menu, nous allons ajouter un élément li avec les classes nav-item et dropdown, puis insérer une nouvelle liste pour les éléments du sous-menu.

<li class="nav-item dropdown">
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Sous-menu</a>
  <ul class="dropdown-menu">
    <li><a href="#" class="dropdown-item">Sous-menu 1</a></li>
    <li><a href="#" class="dropdown-item">Sous-menu 2</a></li>
    <li><a href="#" class="dropdown-item">Sous-menu 3</a></li>
  </ul>
</li>

Pour que le sous-menu fonctionne, nous devons ajouter l’attribut data-bs-toggle= »dropdown » à l’élément a.

Conclusion

En quelques étapes simples, nous avons créé et personnalisé un menu de navigation avec Bootstrap. Vous avez découvert comment utiliser les classes de Bootstrap pour styliser votre menu, désactiver des liens, indiquer des liens actifs et créer des sous-menus.

Dans la prochaine vidéo, nous verrons comment rendre cette barre de menu responsive. À très bientôt pour la suite de notre formation Bootstrap !