Skip to main content

# Menus déroulants

# Exemples

Lien avec menu

    <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(); },
    });