Liste déroulante Bootstrap 5

Liste déroulante de base

Le menu déroulant est un menu basculable qui permet à l'utilisateur de choisir une valeur à partir d'une liste prédéfinie :

Exemple

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

Essayer vous-même

Exemple d'explication

.dropdown indiquant le menu déroulant.

Pour ouvrir le menu déroulant, utilisez la classe .dropdown-toggle et data-toggle="dropdown" l'attribut du bouton ou du lien.

Affectez .dropdown-menu Classe à <div> Éléments, pour construire effectivement le menu déroulant. Ensuite, ajoutez .dropdown-item Ajoutez la classe à chaque élément du menu déroulant (lien ou bouton).

Ligne de séparation de la liste déroulante

.dropdown-divider Classe pour séparer les liens dans le menu déroulant par une fine bordure horizontale :

Exemple

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

Essayer vous-même

Titre de la liste déroulante

.dropdown-header Classe pour ajouter des titres dans le menu déroulant :

Exemple

<li><h5 class="dropdown-header">En-tête du menu déroulant 1</h5></li>

Essayer vous-même

éléments désactivés et actifs

Utilisez .active Classe pour mettre en surbrillance un élément spécifique du menu déroulant (ajoute une couleur de fond bleue).

Pour désactiver un élément du menu déroulant, utilisez .disabled Classe (qui obtient une couleur de texte pâle et l'icône "no-parking-sign" au survol).

Exemple

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Actif</a></li>
<li><a class="dropdown-item disabled" href="#">Désactivé</a></li>

Essayer vous-même

Position de la liste déroulante

Vous pouvez également .dropend ou .dropstart Ajoutez la classe à l'élément déroulant pour créer un menu "dropend" ou "dropstart". Notez que les flèches/symboles d'insertion sont ajoutés automatiquement :

Dropright

<div class="dropdown dropend">

Essayer vous-même

Dropleft

<div class="dropdown dropstart">

Essayer vous-même

Alignement à droite de la liste déroulante

Pour aligner à droite le menu déroulant, changez .dropdown-menu-end Ajoutez la classe .dropdown-menu des éléments :

Exemple

<div class="dropdown-menu dropdown-menu-end">

Essayer vous-même

Liste déroulante vers le haut

Si vous souhaitez que le menu déroulant s'ouvre vers le haut plutôt que vers le bas, changez l'élément <div> avec class="dropdown" en "dropup"：

Exemple

<div class="dropup">

Essayer vous-même

Texte déroulant

.dropdown-item-text La classe est utilisée pour ajouter du texte pur aux éléments déroulants, ou pour ajouter un style de lien par défaut aux liens.

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 pur</span></li>
</ul>

Essayer vous-même

Combinaison de boutons et de liste déroulante

Exemple

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Téléphone</a></li>
      <li><a class="dropdown-item" href="#">Tablette</a></li>
    </ul>
  </div>
</div>

Essayer vous-même

Combinaison de boutons verticaux et de liste déroulante

Exemple

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Téléphone</a></li>
      <li><a class="dropdown-item" href="#">Tablette</a></li>
    </ul>
  </div>
</div>

Essayer vous-même