Argon Dashboard Django
Toggle contextual overlays for displaying lists of links and more with the Django dropdown plugin.
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Regular </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> </div> </div> <div class="dropdown"> <a href="javascript:;" class="btn btn-default dropdown-toggle " data-toggle="dropdown" id="navbarDropdownMenuLink2"> <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/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-bs4/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-bs4/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-bs4/assets/img/icons/flags/FR.png" /> Français </a> </li> </ul> </div>
The best part is you can do this with any button variant, too:
<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button> <div class="dropdown-menu"> <a class="dropdown-item" href="javascript:;">Action</a> <a class="dropdown-item" href="javascript:;">Another action</a> <a class="dropdown-item" href="javascript:;">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated link</a> </div> </div><!-- /btn-group -->