Bootstrap 4 listes déroulantes
Liste déroulante de base
Un menu déroulant est un menu basculant qui permet à l'utilisateur de choisir une valeur dans une liste prédéfinie :
Exemple
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Exemple expliqué
La .dropdownclasse indique un menu déroulant.
Pour ouvrir le menu déroulant, utilisez un bouton ou un lien avec une classe de .dropdown-toggleet l'
data-toggle="dropdown"attribut.
Ajoutez la .dropdown-menuclasse à un <div>élément pour réellement créer le menu déroulant. Ajoutez ensuite la
.dropdown-itemclasse à chaque élément (liens ou boutons) dans le menu déroulant.
Séparateur déroulant
La .dropdown-dividerclasse est utilisée pour séparer les liens à l'intérieur du menu déroulant avec une fine bordure horizontale :
Exemple
<div class="dropdown-divider"></div>
En-tête déroulant
La .dropdown-headerclasse est utilisée pour ajouter des en-têtes dans le menu déroulant :
Exemple
<div class="dropdown-header">Dropdown header 1</div>
Éléments désactivés et actifs
Mettez en surbrillance un élément de liste déroulante spécifique avec la .activeclasse (ajoute une couleur d'arrière-plan bleue).
Pour désactiver un élément dans le menu déroulant, utilisez la .disabledclasse (obtient une couleur de texte gris clair et une icône "interdiction de stationner" au survol) :
Exemple
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Position déroulante
Vous pouvez également créer un menu "dropright" ou "dropleft", en ajoutant la classe .droprightou .dropleftà l'élément dropdown. Notez que le caret/flèche est ajouté automatiquement :
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Menu déroulant à droite
Pour aligner à droite le menu déroulant, ajoutez la .dropdown-menu-rightclasse à l'élément avec .dropdown-menu :
Exemple
<div class="dropdown-menu dropdown-menu-right">
Déposer jusqu'à
Si vous voulez que le menu déroulant se développe vers le haut plutôt que vers le bas, changez l'élément <div> avec class="dropdown" en "dropup":
Exemple
<div class="dropup">
Texte déroulant
La .dropdown-item-textclasse est utilisée pour ajouter du texte brut à un élément de liste déroulante ou utilisée sur des liens pour le style de lien par défaut.
Exemple
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Boutons groupés avec une liste déroulante
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-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Listes déroulantes des boutons partagés
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Groupe de boutons verticaux avec liste déroulante
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-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Référence complète de la liste déroulante Bootstrap 4
Pour une référence complète de toutes les options, méthodes et événements de la liste déroulante, accédez à notre Bootstrap 4 JS Dropdown Reference .