Exemples

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Bouton avec menu
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
    <li class="dropdown-divider"></li>
    <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
  </ul>
</div>
<div class="dropdown">
  <a class="btn btn-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Lien avec menu
  </a>
  ...
</div>

Boutons segmentés

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Menu déroulant</span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
    <li class="dropdown-divider"></li>
    <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
  </ul>
</div>

Tailles des boutons

<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ...
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-default btn-lg" type="button">
    ...
  </button>
  <button type="button" class="btn btn-lg btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Menu déroulant</span>
  </button>
    <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    ...
    </ul>
</div>
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ...
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-default btn-sm" type="button">
    ...
  </button>
  <button type="button" class="btn btn-sm btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Menu déroulant</span>
  </button>
    <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
    ...
    </ul>
</div>

Directions

<div class="btn-group dropup">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  ...
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
  ...
  </ul>
</div>
<div class="btn-group dropright">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  ...
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
  ...
  </ul>
</div>
<div class="btn-group dropleft">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  ...
  </button>
  <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
  ...
  </ul>
</div>

Contenu de menu

<ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
  <li class="dropdown-header">Titre de menu</li>
  <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
  <li class="dropdown-divider"></li>
  <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
</ul>
<div class="dropdown-header">
  <span class="header-h2">Selectioner organismes</span>
</div>
<ul class="dropdown-body keep-open">
  <li class="dropdown-item form-check-inline">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input"><span>Tout sélectionner</span>
    </label>
  </li>
  <li class="dropdown-item form-check-inline">
    <label class="form-check-label">
      <input type="checkbox" checked="" aria-checked="true" aria-invalid="false" class="form-check-input"><span>01752</span>
    </label>
  </li>
  <li class="dropdown-item form-check-inline">
    <label class="form-check-label">
      <input type="checkbox" aria-checked="false" aria-invalid="false" class="form-check-input"><span>01751</span>
    </label>
  </li>
</ul>
<div class="dropdown-footer">
  <button class="btn btn-sm btn-default">Annuler</button>
  <button class="btn btn-sm btn-default">Valider</button>
</div>
</div>

Lorsque le menu déroulant possède du contenu interactif (formulaire, case à cocher, boutons ...), il faut gérer les clicks à l'intérieur du menu pour conserver le menu ouvert.

Dans l'exemple ci-dessus la classe .keep-open est associé au JavaScript suivant :

// keep dropdown open on click
$('.dropdown .keep-open').on({
    "click":function(e){ e.stopPropagation(); },
});