Skip to Content
BootstrapPartie 5 — Navigation & overlays5.3 — Dropdowns

5.3 — Dropdowns

⏱️ TL;DR — Un dropdown = un déclencheur avec data-bs-toggle="dropdown" + un .dropdown-menu contenant des .dropdown-item. Le positionnement est géré par Popper (donc bundle JS requis). On contrôle la direction (dropup, dropend…), l’alignement (dropdown-menu-end) et le contenu (séparateurs, en-têtes, texte).

🎯 Objectifs

  • Créer un menu déroulant.
  • Contrôler direction et alignement.
  • Enrichir le menu (en-têtes, séparateurs, formulaires).
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Séparé</a></li>
  </ul>
</div>

Directions

<div class="dropup">…</div>       <!-- vers le haut -->
<div class="dropend">…</div>      <!-- vers la droite -->
<div class="dropstart">…</div>    <!-- vers la gauche -->

Alignement du menu

<ul class="dropdown-menu dropdown-menu-end">…</ul>        <!-- aligné à droite -->
<ul class="dropdown-menu dropdown-menu-lg-end">…</ul>     <!-- responsive -->

Contenu enrichi

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">En-tête</h6></li>
  <li><a class="dropdown-item active" href="#">Actif</a></li>
  <li><a class="dropdown-item disabled">Désactivé</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><span class="dropdown-item-text">Texte simple</span></li>
</ul>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Compte</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Profil</a></li>
    <li><a class="dropdown-item" href="#">Déconnexion</a></li>
  </ul>
</li>

Split button

<div class="btn-group">
  <button class="btn btn-primary">Action</button>
  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Ouvrir le menu</span>
  </button>
  <ul class="dropdown-menu">…</ul>
</div>

⚠️ Piège — Le dropdown ne se positionne pas ? Vous avez probablement chargé bootstrap.js sans Popper au lieu du bundle. Autre cause : un parent avec overflow: hidden qui rogne le menu — Popper peut « échapper » via l’option data-bs-display ou en le rendant dans le body.

💡 Pour un dev React — Le dropdown est un cas typique où le JS Bootstrap et React se marchent dessus (gestion du focus, fermeture au clic extérieur). Préférez <Dropdown> de react-bootstrap, ou une lib headless (Radix, Headless UI) stylée avec les classes dropdown-*.

✏️ Exercices

  1. Un menu compte dans une navbar, aligné à droite.

✅ Solution

nav-item dropdown + dropdown-menu dropdown-menu-end.

  1. Un split button (action principale + flèche pour plus d’options).

✅ Solution

Reprendre le markup « split button » ci-dessus.

🧠 Quiz de révision

1. Quel attribut ouvre un dropdown ?

data-bs-toggle="dropdown".

2. Quelle dépendance positionne le menu ?

Popper (via le bundle JS).

3. Comment aligner le menu à droite ?

dropdown-menu-end.

4. Comment faire un menu qui s’ouvre vers le haut ?

Enrober dans .dropup.

5. Quelle classe pour une ligne de séparation ?

dropdown-divider (sur un <hr>).

Chapitre suivant : 5.4 — Modal & offcanvas

5.2 — Nav, tabs, pagination, breadcrumb5.4 — Modal & offcanvas