Barres de navigation Bootstrap 5

Barre de navigation

La barre de navigation est le en-tête de navigation situé en haut de la page :

Barre de navigation de base

En utilisant Bootstrap, la barre de navigation peut se déplier ou se replier en fonction de la taille de l'écran.

Veuillez utiliser .navbar La classe crée une barre de navigation standard, suivie de la classe de pliage réactive :.navbar-expand-xxl|xl|lg|md|sm（Alignés horizontalement sur les appareils extrêmement grands, très grands, grands, moyens ou en empilement vertical sur les petits écrans）。

Pour ajouter des liens dans la barre de navigation, utilisez class="navbar-nav" du <ul> élément (ou <div>）。Ensuite, ajoutez l'élément portant .nav-item de la classe <li> suivi de l'élément portant .nav-link de la classe <a> L'élément :

Exemple

<!-- Barre de navigation horizontale grise qui devient verticale sur les petits écrans -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Liens -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" 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>
    </ul>
  </div>
</nav>

Essayez-le vous-même

la barre de navigation verticale

Supprimer .navbar-expand-* La classe peut créer une barre de navigation toujours verticale :

Exemple

<!-- Barre de navigation verticale grise -->
<nav class="navbar bg-light">
  ...
</nav>

Essayez-le vous-même

une barre de navigation centrée

Ajouter .justify-content-center La classe peut centrer la barre de navigation :

Exemple

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Essayez-le vous-même

barre de navigation colorée

Utilisez n'importe quelle .bg-color Pour changer la couleur de fond de la barre de navigation, utilisez la classe :

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Aide :Veuillez utiliser .navbar-dark Ajouter la couleur de texte blanche à tous les liens de la barre de navigation, ou utiliser .navbar-light Ajouter la couleur de texte noire.

Exemple

<!-- Couleur de fond grise, texte blanc -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Lien</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Lien</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Actif</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Désactivé</a>
<!-- Arrière-plan noir, texte blanc -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Arrière-plan bleu, texte blanc -->

Essayez-le vous-même

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>L'état actif / désactivé : .active à la classe <a> L'élément peut mettre en valeur le lien actuel, ou ajouter .disabled La classe pour indiquer que le lien n'est pas cliquable.

Nom de marque / Logo

.navbar-brand pour mettre en valeur le nom de marque / logo / nom du projet de la page :

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Essayez-le vous-même

Si vous utilisez la classe .navbar-brand Lorsque la classe est utilisée avec une image, Bootstrap 5 ajuste automatiquement le style de l'image pour s'adapter à la barre de navigation verticalement.

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Logo Avatar" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Essayez-le vous-même

Texte de la barre de navigation

Veuillez utiliser .navbar-text La classe .navbar-text aligne verticalement tout élément non lié dans la barre de navigation (assurez-vous des marges internes et des couleurs de texte correctes).

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Texte de la barre de navigation</span>
  </div>
</nav>

Essayez-le vous-même

Souvent, surtout sur les petits écrans, vous souhaitez cacher les liens de navigation et les remplacer par un bouton, qui affichera ces liens lors d'un clic sur ce bouton.

Pour créer une barre de navigation pliable, utilisez une classe class="navbar-toggler"、data-bs-toggle="collapse" et data-bs-target="#thetarget" et envelopper le contenu de la barre de navigation (liens, etc.) class="collapse navbar-collapse" dans l'élément <div> suivant, avec la classe data-bs-target correspondant id :thetarget"。

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Lien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Lien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Lien</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Essayez-le vous-même

Aide :Vous pouvez également supprimer .navbar-expand-md Les classes cachent toujours les liens de la barre de navigation et affichent le bouton de bascule.

Barre de navigation avec menu déroulant

La barre de navigation peut contenir des menus déroulants :

Exemple

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Menu déroulant</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Lien</a></li>
    <li><a class="dropdown-item" href="#">Un autre lien</a></li>
    <li><a class="dropdown-item" href="#">Troisième lien</a></li>
  </ul>
</li>

Essayez-le vous-même

Menu et boutons de la barre de navigation

Vous pouvez également inclure un formulaire dans la barre de navigation :

Exemple

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Lien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Lien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Lien</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Recherche">
        <button class="btn btn-primary" type="button">Recherche</button>
      </form>
    </div>
  </div>
</nav>

Essayez-le vous-même

Barre de navigation fixée

La barre de navigation peut également être fixée en haut ou en bas de la page.

La barre de navigation fixée reste visible à une position fixe indépendante du défilement de la page (haut ou bas).

.fixed-top Cette classe permet à la barre de navigation de rester fixée sur la page.Haut:

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Essayez-le vous-même

Veuillez utiliser la classe .fixed-bottom pour fixer la barre de navigation en bas de la page :

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Essayez-le vous-même

Veuillez utiliser .sticky-top Cette classe permet à la barre de navigation de rester fixée/stay sur la page lors du défilement.Haut.

Remarque :Ce type ne fonctionne pas dans Internet Explorer 11 et versions antérieures (le considérer comme position:relative)

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Essayez-le vous-même