Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
<div class="dropdown"> <a href="javascript:;" class="btn bg-gradient-dark dropdown-toggle " data-bs-toggle="dropdown" id="navbarDropdownMenuLink2"> <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/US.png" /> Flags </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2"> <li> <a class="dropdown-item" href="javascript:;"> <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/DE.png" /> Deutsch </a> </li> <li> <a class="dropdown-item" href="javascript:;"> <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/GB.png" /> English(UK) </a> </li> <li> <a class="dropdown-item" href="javascript:;"> <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/FR.png" /> Français </a> </li> </ul> </div>
<div class="btn-group dropup mt-7"> <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropup </button> <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li> <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li> <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li> </ul> </div>
The best part is you can do this with any button variant, too:
<div class="dropdown"> <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Primary </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn bg-gradient-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Secondary </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn bg-gradient-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Success </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn bg-gradient-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Info </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn bg-gradient-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Warning </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn bg-gradient-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Danger </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-dark me-2 dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Dark </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-white me-2 dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> White </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="javascript:;">Action</a></li> <li><a class="dropdown-item" href="javascript:;">Another action</a></li> <li><a class="dropdown-item" href="javascript:;">Something else here</a></li> </ul> </div>