Bootstrap5 Menus déroulants

Un menu déroulant est un menu contextuel basculable qui affiche des liens sous forme de liste.

Exemple

<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Bouton déroulant</button> <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> </div>

Essayez-le vous-même »

Explication de l'exemple

.dropdownLa classe est utilisée pour spécifier un menu déroulant.

Nous pouvons utiliser un bouton ou un lien pour ouvrir le menu déroulant, et le bouton ou le lien doit ajouter.dropdown-toggleet l'attributdata-toggle="dropdown".

<div>Ajoutez la classe.dropdown-menuà l'élément pour définir le menu déroulant réel, puis ajoutez la classe.dropdown-itemaux options du menu déroulant.

Séparateur dans le menu déroulant

.dropdown-dividerLa classe est utilisée pour créer un séparateur horizontal dans le menu déroulant :

Exemple

<li><hr class="dropdown-divider"></hr></li>

Essayez-le vous-même »

En-tête dans le menu déroulant

.dropdown-headerLa classe est utilisée pour ajouter un en-tête dans le menu déroulant :

Exemple

<li><h5 class="dropdown-header">En-tête 1</h5></li>

Essayez-le vous-même »

Éléments actifs et désactivés dans le menu déroulant

La classe .active mettra en évidence l'élément du menu déroulant (ajoute un arrière-plan bleu).

Pour désactiver un élément de menu déroulant, vous pouvez utiliser la.disabledclasse.

Exemple

<a class="dropdown-item" href="#">Élément normal</a> <a class="dropdown-item active" href="#">Élément actif</a> <a class="dropdown-item disabled" href="#">Élément désactivé</a>

Essayez-le vous-même »

Positionnement du menu déroulant

Si nous voulons que le menu déroulant soit aligné à droite, nous pouvons, sur l'élément.dropdownaprès la classe, ajouter.dropendou.dropstartclass.

.dropendest aligné à droite,.dropstartest aligné à gauche.

Exemple

<!--Aligné à droite--> <div class="dropdown dropend"> ... </div> <!--Aligné à gauche--> <div class="dropdown dropstart"> ... </div>

Essayez-le vous-même »

Paramètres de direction du menu déroulant

La direction par défaut du menu déroulant est vers le bas, mais nous pouvons également définir différentes directions.

Spécifier un menu déroulant qui s'ouvre vers la droite

Si vous voulez que le menu déroulant s'ouvre vers la droite, vous pouvez ajouter la classe.dropdown-menu-end:

Exemple

<!--Bouton de menu déroulant à droite--> <div class="dropdown dropdown-menu-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Le menu déroulant s'ouvre vers la droite</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Lien 1</a></li> <li><a class="dropdown-item" href="#">Lien 2</a></li> <li><a class="dropdown-item" href="#">Lien 3</a></li> </ul> </div>

Essayez-le vous-même »

Spécifier un dropup qui s'ouvre vers le haut

Si vous voulez que le menu dropup s'ouvre vers le haut, vous pouvez ajouter la classe"dropup":

Exemple

<!--Bouton dropup--> <div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Menu déroulant</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Lien 1</a></li> <li><a class="dropdown-item" href="#">Lien 2</a></li> <li><a class="dropdown-item" href="#">Lien 3</a></li> </ul> </div>

Essayez-le vous-même »

Spécifier un menu déroulant qui s'ouvre vers la gauche

Si vous voulez que le menu déroulant s'ouvre vers la gauche, vous pouvez ajouter la classedropstart:

Exemple

<!--Bouton de menu déroulant à gauche--> <div class="dropstart">Ajoutez du contenu pour tester l'effet de popup à gauche.<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Menu déroulant</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Lien 1</a></li> <li><a class="dropdown-item" href="#">Lien 2</a></li> <li><a class="dropdown-item" href="#">Lien 3</a></li> </ul> </div>

Essayez-le vous-même »

Paramètres de texte du menu déroulant

.dropdown-item-textLes classes peuvent définir des éléments texte dans le menu déroulant :

Exemple

<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Lien 1</a></li> <li><a class="dropdown-item" href="#">Lien 2</a></li> <li><a class="dropdown-item" href="#">Lien 3</a></li> <li><a class="dropdown-item-text" href="#">Lien texte</a></li> <li><span class="dropdown-item-text">Texte simple</span></li> </ul>

Essayez-le vous-même »

Menu déroulant dans un groupe de boutons

Nous pouvons ajouter un menu déroulant à un bouton :

Exemple

<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablette</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div>

Essayez-le vous-même »

Groupe de boutons vertical avec menu déroulant :

Exemple

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablette</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div>

Essayez-le vous-même »

Exemple de barre de navigation

Exemple


Essayez-le vous-même »
Autres extensions