DOCS
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Examples
Flags
Deutsch
English(UK)
<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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="btn btn-default dropdown-toggle " data-toggle="dropdown" id="navbarDropdownMenuLink2">
<img src="../../../../assets/img/icons/flags/US.png" /> Flags
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<li>
<a class="dropdown-item" href="#">
<img src="../../../../assets/img/icons/flags/DE.png" /> Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img src="../../../../assets/img/icons/flags/GB.png" /> English(UK)
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img src="../../../../assets/img/icons/flags/US.png" /> Français
</a>
</li>
</ul>
</div>Multilevel Dropdown
<div class="dropdown">
<button class="btn btn-primary btn-block" type="button" id="multiDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click here
<div class="ripple-container"></div></button>
<div class="dropdown-menu" aria-labelledby="multiDropdownMenu">
<a class="dropdown-item" href="#pablo">Action</a>
<a class="dropdown-item" href="#pablo">Another action</a>
<a class="dropdown-item dropdown-toggle" href="#pablo">Submenu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Submenu action</a>
<a class="dropdown-item" href="#pablo">Submenu action</a>
<a class="dropdown-item dropdown-toggle" href="#pablo">Subsubmenu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
<a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
</div>
<a class="dropdown-item dropdown-toggle" href="#pablo">Second subsubmenu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
<a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
</div>
</div>
</div>
</div>Dropup
Click me
<div class="dropup">
<div class="btn btn-primary" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Click me</span>
</div>
<div class="dropdown-menu">
<a href="javascript:;" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>My profile</span>
</a>
<a href="javascript:;" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Settings</span>
</a>
<a href="javascript:;" class="dropdown-item">
<i class="ni ni-calendar-grid-58"></i>
<span>Activity</span>
</a>
<a href="javascript:;" class="dropdown-item">
<i class="ni ni-support-16"></i>
<span>Support</span>
</a>
<div class="dropdown-divider"></div>
<a href="javascript:;" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Logout</span>
</a>
</div>
</div>Colors
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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->