ComposantsJavaScript requis

Menus déroulants

Un menu déroulant affiche une liste d’actions ou de liens à partir d’un bouton. Il se positionne automatiquement, se ferme à l’extérieur ou à la touche Échap et se pilote au clavier.

Le conteneur dropdown entoure un bouton dropdown-toggle avec data-bs-toggle="dropdown" et un dropdown-menu. Cauri inclut déjà la bibliothèque de positionnement nécessaire.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Mes comptes
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Compte courant</a></li>
    <li><a class="dropdown-item" href="#">Livret d'épargne</a></li>
    <li><a class="dropdown-item" href="#">Compte jeune</a></li>
  </ul>
</div>

Bouton scindé#

Associez un bouton d’action à un second bouton dropdown-toggle-split qui ouvre le menu. Le texte masqué visually-hidden nomme le second bouton.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Virement</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Autres types de virement</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Virement permanent</a></li>
    <li><a class="dropdown-item" href="#">Virement différé</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Virement international</a></li>
  </ul>
</div>

Tailles et variantes de bouton#

Le bouton déclencheur accepte toutes les classes de Boutons : couleurs, contour et tailles.

<div class="btn-group">
  <button class="btn btn-outline-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Grand menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Autre action</a></li>
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Petit menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Autre action</a></li>
  </ul>
</div>
<div class="dropdown d-inline-block">
  <a class="btn btn-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Lien déclencheur</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

Directions#

Ajoutez dropup, dropend ou dropstart au conteneur pour ouvrir le menu vers le haut, la droite ou la gauche, ou dropdown-center et dropup-center pour le centrer. Si l’espace manque, le menu se replace tout seul.

<div class="d-flex flex-wrap gap-3 mt-5 pt-3">
  <div class="btn-group dropup">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Vers le haut</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group dropend">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Vers la droite</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group dropstart">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Vers la gauche</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group dropdown-center">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Centré</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
</div>

Un menu accepte des éléments actifs et désactivés, des titres (dropdown-header), des séparateurs (dropdown-divider) et du texte libre (dropdown-item-text). Les éléments peuvent être des a ou des button.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Mon profil</button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Compte</h6></li>
    <li><a class="dropdown-item active" href="#" aria-current="true">Informations personnelles</a></li>
    <li><a class="dropdown-item" href="#">Sécurité</a></li>
    <li><a class="dropdown-item disabled" aria-disabled="true">Parrainage (bientôt)</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><span class="dropdown-item-text">Connecté depuis Abidjan</span></li>
    <li><button class="dropdown-item" type="button">Se déconnecter</button></li>
  </ul>
</div>

Le menu s’aligne à gauche du bouton. dropdown-menu-end l’aligne à droite ; dropdown-menu-{sm|md|lg|xl|xxl}-end ou -start ne changent l’alignement qu’à partir d’un point de rupture.

<div class="d-flex justify-content-end">
  <div class="btn-group">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Aligné à droite</button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Autre action</a></li>
    </ul>
  </div>
  <div class="btn-group ms-2">
    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">À droite dès lg</button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Autre action</a></li>
    </ul>
  </div>
</div>

Un menu peut accueillir un formulaire. Gardez-le ouvert pendant la saisie avec data-bs-auto-close="outside" et donnez un libellé à chaque champ.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Rechercher une opération</button>
  <form class="dropdown-menu p-3" style="min-width: 18rem;">
    <div class="mb-3">
      <label for="md-form-montant" class="form-label">Montant minimum (FCFA)</label>
      <input type="number" class="form-control" id="md-form-montant" placeholder="50 000">
    </div>
    <div class="mb-3">
      <label for="md-form-libelle" class="form-label">Libellé</label>
      <input type="text" class="form-control" id="md-form-libelle">
    </div>
    <button type="submit" class="btn btn-primary">Filtrer</button>
  </form>
</div>

Fermeture automatique#

Par défaut, un clic dans le menu ou en dehors ferme le menu. data-bs-auto-close change ce comportement : "inside" ferme au clic dans le menu seulement, "outside" au clic à l’extérieur seulement, "false" uniquement par le bouton. La touche Échap ferme toujours le menu.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Par défaut</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Dedans</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Dehors</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manuel</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Autre action</a></li></ul>
  </div>
</div>

Classes

Classes
Classe	Rôle
`dropdown`, `dropup`, `dropend`, `dropstart`, `dropdown-center`, `dropup-center`	Conteneur positionné ; détermine la direction d’ouverture.
`dropdown-toggle`	Bouton ou lien déclencheur, avec le chevron.
`dropdown-toggle-split`	Déclencheur compact d’un bouton scindé.
`dropdown-menu`	Le menu lui-même, masqué tant que `show` est absent.
`dropdown-menu-end`, `dropdown-menu-start`, `dropdown-menu-{bp}-end`, `dropdown-menu-{bp}-start`	Alignement horizontal, éventuellement à partir d’un point de rupture (`sm` à `xxl`).
`dropdown-item`	Élément du menu (`a` ou `button`) ; `active` et `disabled` pour ses états.
`dropdown-item-text`	Texte non interactif dans le menu.
`dropdown-header`	Titre de section.
`dropdown-divider`	Séparateur horizontal.

Options JavaScript

Les options se posent en attributs data-bs-* (par exemple data-bs-offset="0,10") ou dans l’objet de configuration.

Options JavaScript
Option	Type	Défaut	Description
`autoClose`	booléen ou chaîne	`true`	`true` : fermeture au clic dedans et dehors ; `"inside"` : dedans seulement ; `"outside"` : dehors seulement ; `false` : par le bouton seulement.
`boundary`	chaîne ou élément	`"clippingParents"`	Zone dans laquelle le menu doit rester visible pour la détection de débordement.
`display`	chaîne	`"dynamic"`	`"dynamic"` positionne le menu avec la bibliothèque de placement ; `"static"` la désactive (utile dans une barre de navigation).
`offset`	tableau, chaîne ou fonction	`[0, 2]`	Décalage du menu en pixels, `[décalage latéral, distance]`. En attribut : `data-bs-offset="10,20"`.
`popperConfig`	null, objet ou fonction	`null`	Configuration avancée du moteur de positionnement.
`reference`	chaîne, élément ou objet	`"toggle"`	Élément servant de repère de position : `"toggle"` (le bouton), `"parent"` (le conteneur), ou un élément.

Méthodes

Méthodes
Méthode	Description
`toggle()`	Ouvre ou ferme le menu.
`show()`	Ouvre le menu.
`hide()`	Ferme le menu.
`update()`	Recalcule la position du menu (après un changement de contenu ou de taille).
`dispose()`	Détruit l’instance.
`getInstance(element)`	Méthode statique : renvoie l’instance associée au bouton, ou `null`.
`getOrCreateInstance(element, options)`	Méthode statique : renvoie l’instance existante ou en crée une.

Événements

Ils sont émis sur le bouton déclencheur, qui est aussi leur relatedTarget. hide.bs.dropdown fournit clickEvent quand la fermeture vient d’un clic.

Événements
Événement	Description
`show.bs.dropdown`	Au début de l’ouverture. `preventDefault()` l’annule.
`shown.bs.dropdown`	Quand le menu est ouvert.
`hide.bs.dropdown`	Au début de la fermeture. `preventDefault()` l’annule.
`hidden.bs.dropdown`	Quand le menu est fermé.

Attributs data-bs

Attributs data-bs
Attribut	Où le poser	Rôle
`data-bs-toggle="dropdown"`	Déclencheur	Active le menu déroulant.
`data-bs-auto-close`	Déclencheur	Équivalent de l’option `autoClose`.
`data-bs-offset`	Déclencheur	Équivalent de `offset` (par exemple `"0,10"`).
`data-bs-display="static"`	Déclencheur	Désactive le positionnement dynamique.
`data-bs-reference`	Déclencheur	Équivalent de `reference` (`"toggle"` ou `"parent"`).
`data-bs-boundary`	Déclencheur	Équivalent de `boundary`.
`aria-expanded`	Déclencheur	État ouvert ou fermé, mis à jour par le script.

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$dropdown-min-width`	`10rem`	Largeur minimale du menu.
`$dropdown-padding-x`, `$dropdown-padding-y`	`0`, `.5rem`	Espacement interne du menu.
`$dropdown-spacer`	`.125rem`	Distance entre le bouton et le menu.
`$dropdown-font-size`	`1rem`	Taille du texte.
`$dropdown-color`, `$dropdown-bg`	`var(--bs-body-color)`, `var(--bs-body-bg)`	Texte et fond du menu.
`$dropdown-border-color`	`var(--bs-border-color-translucent)`	Couleur de la bordure.
`$dropdown-border-radius`	`var(--bs-border-radius)`	Arrondi des angles.
`$dropdown-divider-bg`, `$dropdown-divider-margin-y`	`$dropdown-border-color`, `.5rem`	Séparateur.
`$dropdown-box-shadow`	`var(--bs-box-shadow)`	Ombre du menu.
`$dropdown-link-color`, `$dropdown-link-hover-bg`	`var(--bs-body-color)`, `var(--bs-tertiary-bg)`	Texte des éléments et fond au survol.
`$dropdown-link-active-color`, `$dropdown-link-active-bg`	`#fff`, `$component-active-bg` (bleu BDU)	Élément actif.
`$dropdown-link-disabled-color`	`var(--bs-tertiary-color)`	Élément désactivé.
`$dropdown-item-padding-y`, `$dropdown-item-padding-x`	`.25rem`, `1rem`	Espacement d’un élément.
`$dropdown-header-color`	`$gray-600`	Couleur des titres de section.
`$caret-width`	`.3em`	Taille du chevron de `dropdown-toggle`.

Personnalisation#

Le menu lit des propriétés CSS --bs-dropdown-* : redéfinissez-les sur le dropdown-menu pour une variante locale.

// Global : avant l'import de Cauri
$dropdown-min-width: 12rem;
$dropdown-item-padding-y: 0.5rem;
$dropdown-border-radius: 0.625rem;
$dropdown-link-hover-bg: #EAEBEA;

// Local : un menu au survol vert
.menu-agence {
  --bs-dropdown-link-hover-bg: #EEF3EA;
  --bs-dropdown-link-active-bg: #387A1B;
  --bs-dropdown-min-width: 14rem;
}

Utilisation en JavaScript#

const bouton = document.querySelector('#menu-comptes');
const menu = new bootstrap.Dropdown(bouton, { autoClose: 'outside', offset: [0, 8] });

bouton.addEventListener('shown.bs.dropdown', () => {
  console.log('Menu ouvert');
});

menu.show();

Bonnes pratiques

À faire

Gardez le libellé du bouton explicite : il décrit le contenu du menu (« Mes comptes »), pas l’action d’ouverture.
Regroupez les éléments avec dropdown-header et dropdown-divider si le menu dépasse six entrées.
Utilisez des a pour naviguer et des button pour déclencher une action.
Choisissez la direction ou l’alignement qui garde le menu dans l’écran sur mobile.

À éviter

N’imbriquez pas des menus dans des menus.
N’y placez pas des actions critiques sans confirmation (supprimer un compte, clôturer un contrat).
Ne cachez pas dans un menu une action principale que tous les utilisateurs doivent voir.
Ne déroulez pas de très longues listes : proposez plutôt une recherche.

Accessibilité

Le déclencheur est un button (ou un lien avec role="button") avec aria-expanded à jour ; gardez-le.
Au clavier : Entrée, Espace ou flèche bas ouvrent le menu ; les flèches haut et bas parcourent les entrées ; Échap ferme et rend le focus au bouton.
Pour un élément désactivé, ajoutez aria-disabled="true" aux liens ; les éléments disabled sont sautés par la navigation aux flèches.
Dans un menu contenant un formulaire, chaque champ garde un label visible.
Sur un bouton scindé, donnez un texte masqué au bouton qui ouvre le menu.