Les menus de navigation

Name: Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
Rating: 5 (1 reviews)

L’objectif

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

Insérer un menu de navigation complet

Le dossier à télécharger pour ces exemples est nommé 11-Menu-Nav-01.

1. La structure générale

Dans l’exemple qui suit, nous allons insérer un menu de navigation très complet, avec un titre qui pourra être celui de votre site ou de votre entreprise, des éléments de menus classiques et hiérarchiques et un champ de recherche.

Voici le code utilisé dans cet exemple :

<nav class="navbar navbar-expand-lg navbar-light 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=""> 
    </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...

Les options des menus de navigation

1. Insérer un texte

Vous pouvez parfaitement insérer 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 navbar-light 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"> 
          <a...