.dropdown-menu
ou .dropdown-item
et des informations peuvent y être ajoutées..dropdown
indique un menu déroulant..dropdown-toggle
définit l’élément déclencheur, qui est un bouton dans notre cas, alors que l’attribut data-bs-toggle="dropdown"
est requis sur l’élément déclencheur pour basculer le menu déroulant.data-toggle="dropdown"
est requis sur l’élément déclencheur pour basculer dans le menu déroulant..dropdown-menu
construit en fait le menu déroulant qui contient généralement les liens ou actions associés.Pour ouvrir le menu déroulant, utilisez un bouton ou un lien avec une classe de .dropdown-toggle et l’attribut data-toggle="dropdown".
.dropdown-menu
à un élément <div>
pour créer le menu déroulant..dropdown-item
à chaque élément (liens ou boutons) dans le menu déroulant..dropdown
indique un menu déroulant..dropdown-toggle
et l’attribut data-toggle="dropdown"
pour ouvrir le menu déroulant..dropdown-menu
à l’élément <div> pour créer le menu déroulant..dropdown-item
à chaque élément (liens ou boutons) dans le menu déroulant.<div class="dropdown-divider"></div>
pour séparer les liens dans le menu déroulant avec une fine bordure horizontale.dropup
pour ouvrir le menu en haut.dropdown-divider
.Exemple:
<div role="separator" class="dropdown-divider"></div>
.dropup
, .dropstart
et .dropend
, respectivement à l’élément parent (c’est-à-dire l’ .btn-groupélément), comme illustré dans l’exemple suivant.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropup, Dropleft and Dropright Menus</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 200px;
}
</style>
</head>
<body>
<div class="bs-example">
<p><strong>Note:</strong> Dropdown direction may be adjusted if there is not enough space around the button to show the specified dropdown.</p>
<!-- Dropup menu -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<!-- Dropleft menu -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropleft</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<!-- Dropright menu -->
<div class="btn-group dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropright</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
</body>
</html>
Dropup
class="dropdown"
en "dropup"
:.dropup
permet au menu déroulant de se développer vers le haut plutôt que vers le bas :Dropright
class="dropdown"
en "dropright"
:.dropright
permet au menu déroulant de se développer à droite plutôt que vers le bas :Dropleft
class="dropdown"
en "dropleft"
:.dropleft
permet au menu déroulant de se développer à gauche plutôt que vers le bas :