Barre de navigation Bootstrap5

La barre de navigation est généralement placée en haut de la page.

Nous pouvons utiliser la classe.navbarpour créer une barre de navigation standard, suivie de :.navbar-expand-xxl|xl|lg|md|smclasse pour créer une barre de navigation responsive (horizontale sur les grands écrans, empilée verticalement sur les petits écrans).

Les options de la barre de navigation peuvent utiliser l'élément<ul>et ajouterclass="navbar-nav"classe.<li>Ensuite.nav-itemajouter sur l'élément<a>utiliser sur l'élément.nav-linkclasse :

Exemple

<!--Sur les petits écrans, la barre de navigation horizontale devient verticale.--> <nav classe="navbar navbar-expand-sm bg-light"> <!-- 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> </nav>

Essayez-le vous-même »

Barre de navigation verticale

En supprimant la classe.navbar-expand-xxl|xl|lg|md|sm, vous pouvez créer une barre de navigation verticale :

Exemple

<!--Barre de navigation verticale--> <nav class="navbar bg-light"> <!-- 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> </nav>

Essayez-le vous-même »

Barre de navigation centrée

En ajoutant la classe.justify-content-center, vous pouvez créer une barre de navigation centrée :

Exemple

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

Essayez-le vous-même »

Barre de navigation avec différentes couleurs

Vous pouvez utiliser les classes suivantes pour créer des barres de navigation avec différentes couleurs :.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket.bg-light).

Astuce :Pour les arrière-plans sombres.navbar-darkvous devez définir la couleur du texte sur clair ; pour les arrière-plans clairs.navbar-lightvous devez définir la couleur du texte sur foncé.

Exemple

<!--Arrière-plan gris avec texte noir--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Actif</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> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul> </nav> <!--Fond noir avec texte blanc--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--Fond bleu avec texte blanc--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Essayez-le vous-même »

États actifs et désactivés: vous pouvez<a>ajouter à l'élément la classe.activepour mettre en évidence l'option sélectionnée..disabledla classe est utilisée pour rendre le lien non cliquable.

Marque/Logo

.navbar-brandla classe est utilisée pour mettre en évidence la marque/logo :

Exemple

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

Essayez-le vous-même »

Vous pouvez utiliser.navbar-brandclasse pour rendre l'image responsive dans la barre de navigation.

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav>

Essayez-le vous-même »

Barre de navigation repliable

Habituellement, sur les petits écrans, nous réduisons la barre de navigation et affichons les options de navigation en cliquant.

Pour créer une barre de navigation réductible, vous pouvez ajouter sur le boutonclass="navbar-toggler", data-bs-toggle="collapse" et data-target="#thetarget"classe. Ensuite, sur leclass="collapse navbar-collapse"div avec la classe, enveloppez le contenu de navigation (liens). L'id sur l'élément div correspond à l'data-targetid spécifié sur le bouton :

Exemple

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Marque --> <a class="navbar-brand" href="#">Barre de navigation</a> <!-- Bouton bascule/repliable --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Liens de la barre de navigation --> <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> </nav>

Essayez-le vous-même »

Barre de navigation avec menu déroulant

Vous pouvez définir un menu déroulant sur la barre de navigation :

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Marque --> <a class="navbar-brand" href="#">Logo</a> <!-- 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> <!-- Menu déroulant --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown"> Lien déroulant </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Lien 1</a> <a class="dropdown-item" href="#">Lien 2</a> <a class="dropdown-item" href="#">Lien 3</a> </div> </li> </ul> </nav>

Essayez-le vous-même »

Formulaires et boutons dans la barre de navigation

Formulaires de barre de navigation<form>l'élément utiliseclass="form-inline"classe pour organiser les champs de saisie et les boutons :

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Rechercher"> <button class="btn btn-success" type="submit">Rechercher</button> </form> </nav>

Essayez-le vous-même »

Vous pouvez également utiliser d'autres classes d'entrée, telles que.input-group-addonla classe est utilisée pour ajouter une petite étiquette avant le champ de saisie.

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Nom d'utilisateur"> </div> </form> </nav>

Essayez-le vous-même »

Texte de la barre de navigation

Utilisez.navbar-textLa classe pour définir du texte sans lien sur la barre de navigation assure l'alignement horizontal, avec la même couleur et le même padding.

Exemple

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- 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> </ul> <!-- Texte de la barre de navigation--> <span class="navbar-text"> Texte de la barre de navigation </span> </nav>

Essayez-le vous-même »

Barre de navigation fixe

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

Nous utilisons la classe.fixed-toppour fixer la barre de navigation :

Exemple

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

Essayez-le vous-même »

.fixed-bottomLa classe est utilisée pour fixer la barre de navigation en bas :

Exemple

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

Essayez-le vous-même »

Exemple de barre de navigation

Exemple


Essayez-le vous-même »
Autres extensions