Les menus de navigation

Name: Bootstrap 5 Un framework pour concevoir vos sites web
Rating: 5 (1 reviews)

L’objectif

Bootstrap vous permet d’insérer dans les en-têtes de vos sites web des menus de navigation très élaborés pour que les visiteurs puissent naviguer et atteindre rapidement telle ou telle page de vos sites. De très nombreuses fonctionnalités peuvent être utilisées dans les menus de navigation afin que l’expérience utilisateur soit la meilleure.

Un menu de navigation complet

Les exemples à télécharger sont dans le dossier 11-Menu-Nav-01.

1. La structure générale

Dans l’exemple qui suit, vous allez créer un menu de navigation très complet, avec un titre, qui pourra être celui de votre site ou de votre entreprise, avec des liens de menu classiques, avec un lien de menu affichant d’autres liens sous la forme d’un menu hiérarchique et un champ de recherche.

Voici le code de l’exemple :

<nav class="navbar navbar-expand-lg bg-light">  
  <div class="container-fluid">  
    <-- <a class="navbar-brand" href="#">Mon site</a> -->  
    <a class="navbar-brand" href="#">  
      <img src="terre.png" width="30" height="30" alt="Logo entreprise"> 
    </a>  
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
data-bs-target="#menuprincipal" aria-controls="menuprincipal" 
aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="menuprincipal">  
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" aria-current="page" href="#">Lien 1</a> 
        </li>  ...

Les options des menus de navigation

1. Insérer un texte

Vous pouvez parfaitement afficher du texte dans un menu de navigation. Il vous suffit d’insérer là où vous le souhaitez un élément <span> avec la classe .navbar-text.

Dans cet exemple, le texte est affiché juste après le nom du site ou de l’entreprise :

<nav class="navbar navbar-expand-lg bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Mon site</a>  
    <span class="navbar-text">Menu de navigation</span>  
    <button class="navbar-toggler" type="button" 
data-bs-toggle="collapse" data-bs-target="#menudeux" 
aria-controls="menudeux" aria-expanded="false" 
aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="menudeux">  
      <ul class="navbar-nav mr-auto">  
        <li class="nav-item">  
         ...

Les menus hors contenu

Afin de gagner de la place sur les écrans des tablettes et des portables par exemple, il est très courant d’accéder aux menus de navigation dans une fenêtre en dehors du contenu principal. C’est par une action de l’utilisateur que s’affiche le menu dans une fenêtre spécifique, généralement sur la droite de la fenêtre du navigateur. En anglais, cette technique est nommée off canvas.

L’exemple à télécharger est dans le dossier 11-Menu-Nav-03.

Voici le code de cet exemple :

<nav class="navbar bg-light fixed-top">   
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Mon site</a>  
    <button class="navbar-toggler" type="button" 
data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" 
aria-controls="offcanvasNavbar">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="offcanvas offcanvas-end" tabindex="-1" 
id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">  
      <div class="offcanvas-header">  
        <h5 class="offcanvas-title"...