Barre de navigation Bootstrap4

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

Nous pouvons utiliser la.navbarclasse pour créer une barre de navigation standard, suivie de :.navbar-expand-xl|lg|md|smclasse pour créer une barre de navigation responsive (répartie horizontalement 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 ajouter laclass="navbar-nav"classe.<li>ajoutez sur la.nav-itemclasse,<a>utilisez sur la.nav-linkclasse :

Exemple

<!--Sur les petits écrans, la barre de navigation horizontale passera en vertical.--> <nav class="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.navbar-expand-xl|lg|md|smclasse pour 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.justify-content-centerclasse pour 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, définissez la couleur du texte sur clair ; pour les arrière-plans clairs, définissez la couleur du texte sur sombre.

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 la classe.navbar-brandpour 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

Généralement, sur les petits écrans, nous replions la barre de navigation et affichons les options de navigation en cliquant.

Pour créer une barre de navigation repliable, vous pouvez ajouter au boutonclass="navbar-toggler", data-toggle="collapse" et data-target="#thetarget"class. Ensuite, sur la div qui a l'attributclass="collapse navbar-collapse"class, enveloppez le contenu de navigation (liens) dans la div, et l'id de l'élément div correspond à l'iddata-targetdu bouton spécifié dans le data-target :

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-toggle="collapse" data-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-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 de la barre de navigation

Formulaire de barre de navigation<form>L'élément utilise laclass="form-inline"classe pour disposer le champ de saisie et le bouton :

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 de champ de saisie, telles que.input-group-addonLa classe est utilisée pour ajouter une petite étiquette devant 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 la.navbar-textclasse pour définir du texte non-lien dans la barre de navigation, en garantissant l'alignement horizontal, ainsi que 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.fixed-topclasse pour 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-bottomclasse 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 »
Autres extensions