Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Bootstrap 5
  3. La navigation
Extrait - Bootstrap 5 Un framework pour concevoir vos sites web
Extraits du livre
Bootstrap 5 Un framework pour concevoir vos sites web Revenir à la page d'achat du livre

La navigation

L’objectif

Bootstrap vous propose d’insérer des barres de navigation dans vos pages web. Ces barres de navigation vont utiliser la classe .nav, avec pour chaque lien du menu de navigation, soit une liste <ul>, soit des éléments <a>. Comme la classe .nav utilise le module CSS3 Flexbox, elle peut bénéficier de tous les avantages de cette mise en forme et de cette mise en page.

Les exemples à télécharger sont dans le dossier 10-Navigation-01.

Une barre de navigation simple

1. Une navigation avec une liste

Pour ce premier exemple, vous allez créer une barre de navigation qui utilisera une liste <ul> pour insérer les liens du menu de navigation. Dans la liste, un élément <a> sera inclus dans chaque élément <li> pour créer le lien du menu de navigation.

Voici le code de l’exemple :

<ul class="nav">  
  <li class="nav-item">  
    <a class="nav-link active" href="#">Lien 1</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 2</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 3</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#">Lien 4</a>  
  </li>  
</ul> 

Voici l’affichage obtenu :

images/C10-001.png

Étudions la structure de cet exemple.

La barre de navigation est insérée dans un élément <ul>, avec la classe .nav. Chaque item du menu de navigation est dans un élément...

Les alignements

Par défaut, la barre de navigation est alignée sur la gauche de son conteneur. Comme la classe .nav utilise Flexbox, vous pouvez modifier l’alignement.

La classe supplémentaire .justify-content-center appliquée à l’élément <nav> permet de centrer la barre de navigation : <nav class="nav justify-content-center">. La colonne utilise la classe supplémentaire .border, les bordures permettent de mieux visualiser les alignements. 

Voici le code :

<div class="col border">  
  <nav class="nav justify-content-center">  
    <a class="nav-link" href="#">Lien 1</a>  
    <a class="nav-link" href="#">Lien 2</a>  
    <a class="nav-link" href="#">Lien 3</a>  
    <a class="nav-link" href="#">Lien 4</a>  
  </nav>  
</div> 

Voici l’affichage obtenu :

images/C10-002.png

La classe supplémentaire .justify-content-end appliquée à l’élément <nav> permet d’aligner à droite la barre de navigation : <nav class="nav justify-content-end">.

Voici l’affichage obtenu :

images/C10-003.png

La classe supplémentaire...

Les options de mise en forme

1. Une barre de navigation avec des onglets

Bootstrap vous propose plusieurs classes supplémentaires pour mettre en forme les barres de navigation. La classe .nav-tabs permet d’afficher les liens sous forme d’onglets. Le rendu est meilleur avec une structure utilisant une liste <ul> :

<ul class="nav nav-tabs">  
  <li class="nav-item">  
    <a class="nav-link active" href="#">Lien 1</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 2</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 3</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 4</a>  
  </li>  
</ul> 

Voici l’affichage obtenu :

images/C10-005.png

2. Utiliser des boutons

La classe .nav-pills permet d’afficher les liens sous forme de boutons. Vous pouvez utiliser une structure avec une liste <ul> (<ul class="nav nav-pills">) ou une structure avec des éléments <a>.

Voici le code avec...

Une barre de navigation flexible

Comme la classe .nav est basée sur Flexbox, vous pouvez créer des barres de navigation qui s’adaptent à la taille de l’écran de diffusion.

Voici le code de l’exemple :

<nav class="nav nav-pills flex-column flex-sm-row">  
  <a class="nav-link active" href="#">Lien 1</a>  
  <a class="nav-link" href="#">Lien 2</a>  
  <a class="nav-link" href="#">Lien 3</a>  
  <a class="nav-link" href="#">Lien 4</a>  
</nav> 

L’élément <nav> utilise la classe .flex-column pour indiquer que par défaut, les éléments enfants doivent s’afficher en colonne, les uns sous les autres. Puis, la classe .flex-sm-row indique que les éléments doivent s’afficher en ligne pour les petits écrans et les écrans de largeur supérieure. C’est donc cette règle qui s’applique sur les écrans de petite taille et les écrans plus grands. Pour les écrans très petits, dont la largeur est inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.

Voici l’affichage sur un petit écran et sur un écran de taille supérieure...

Une barre de navigation avec un bouton déroulant

Vous pouvez intégrer des boutons déroulants (cf. chapitre Les boutons) dans une barre de navigation.

Voici le code de l’exemple :

<ul class="nav nav-pills">  
  <li class="nav-item">  
    <a class="nav-link active" href="#">Lien 1</a> 
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" 
href="#" role="button" aria-haspopup="true" 
aria-expanded="false">Lien 2</a>  
    <div class="dropdown-menu">  
      <a class="dropdown-item" href="#">Lien 3</a>  
      <a class="dropdown-item" href="#">Lien 4</a>  
      <a class="dropdown-item" href="#">Lien 5</a>  
    </div>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">Lien 6</a>  
  </li>  
  <li...