Navigation Bootstrap5

Si vous souhaitez créer une barre de navigation horizontale simple, vous pouvez<ul>ajouter la classe.navsur l'élément, et sur chaque<li>ajoutez la classe.nav-itemsur l'élément, et sur chaque lien ajoutez la classe.nav-link:

Exemple

<ul class="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> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le vous-même »

Alignement de la navigation

.justify-content-centerLa classe centre la navigation,.justify-content-endLa classe aligne la navigation à droite.

Exemple

<!--Navigation centrée--> <ul class="nav justify-content-center"> <!--Navigation alignée à droite--> <ul class="nav justify-content-end"> </div>

Essayez-le vous-même »

Navigation verticale

.flex-columnLa classe est utilisée pour créer une navigation verticale :

Exemple

<ul class="nav flex-column">

Essayez-le vous-même »

Onglets

Utiliser la classe.nav-tabspeut transformer la navigation en onglets. Utilisez ensuite la classe .active pour marquer l'élément sélectionné.

Exemple

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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>

Essayez-le vous-même »

Navigation en pilules

.nav-pillsclasse peut définir les éléments de navigation en forme de pilule.

Exemple

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" 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>

Essayez-le vous-même »

Navigation à largeur égale

.nav-justifiedpeut définir les éléments de navigation comme justifiés et de largeur égale.

Exemple

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

Essayez-le vous-même »

Menu déroulant Pills

Exemple

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Menu 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> <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>

Essayez-le vous-même »

Menu déroulant Onglets

Exemple

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Menu 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> <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>

Essayez-le vous-même »

Onglets dynamiques

Si vous souhaitez que les onglets puissent être commutés dynamiquement, vous pouvez ajouter sur chaque liendata-bs-toggle="tab"attribut..tab-paneclasse, et pour le contenu de l'onglet, le<div>balise utilise.tab-contentclasse.

Si vous voulez un effet de fondu, vous pouvez, après.tab-pane, ajouter .fadeclasse :

Exemple

<!-- Onglets de navigation --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Panneaux d'onglets --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Essayez-le vous-même »

Pilules dynamiques

Pour des pills dynamiques, il suffit de définir l'attribut data-bs-toggle dans le code de l'exemple ci-dessus àdata-bs-toggle="pill":

Exemple

<!-- Onglets de navigation --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="pill" href="#home">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Panneaux d'onglets --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Essayez-le vous-même »
Autres extensions