Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Basic
Show code
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</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>Options
Colors
Show code
<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 -->Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Show code
<div class="docs-example">
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</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>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</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>
</div><!-- /example -->Show code
<!-- Large button groups (split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>You can also change the dropdown menu’s size by adding .dropdown-menu-sm or .dropdown-menu-lg on the .dropdown-menu element.
Directions
Trigger dropdown menus above elements by adding .dropup, .dropright or .dropleft to the parent element.
Show code
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</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>
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</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>
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</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>Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Show code
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>Submenu
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
Show code
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>Dividers
Separate groups of related menu items with a divider.
Show code
<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>Forms
Show code
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>Show code
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Links
Show code
<div class="dropdown-menu" aria-labelledby="dropdown_user_account">
<h6 class="dropdown-header">User menu</h6>
<a class="dropdown-item" href="#">
<span class="float-right badge badge-primary">4</span>
<i class="fas fa-envelope text-primary"></i>Messages
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cog text-primary"></i>Settings
</a>
<div class="dropdown-divider" role="presentation"></div>
<a class="dropdown-item" href="#">
<i class="fas fa-sign-out-alt text-primary"></i>Sign out
</a>
</div>Dark
Show code
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark dropdown</button>
<div class="dropdown-menu dropdown-menu-dark bg-dark">
<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">
<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning dropdown</button>
<div class="dropdown-menu dropdown-menu-dark bg-warning">
<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>Examples
Notifications
Show code
<div class="dropdown-menu py-0">
<div class="list-group list-group-flush">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-bell mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
Mail sent to <span class="text-dark font-weight-bold">Alex Michael</span>
</div>
<small class="d-block text-muted">2 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-thumbs-up mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
You liked a comment from <span class="text-dark font-weight-bold">Sandra Wayne</span>
</div>
<small class="d-block text-muted">3 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-thumbs-up mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
New likes from <span class="text-dark font-weight-bold">Jason Miller</span>
</div>
<small class="d-block text-muted">5 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-tasks mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
You are now in team with <span class="text-dark font-weight-bold">Mike Thomson</span>
</div>
<small class="d-block text-muted">2 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-envelope mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
Mail sent to <span class="text-dark font-weight-bold">Richard Nixon</span>
</div>
<small class="d-block text-muted">3 hrs ago</small>
</div>
</div>
</a>
</div>
</div>
<div class="py-3 text-center border-top">
<a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
</div>
</div>Messages
Show code
<div class="dropdown-menu py-0">
<div class="list-group list-group-flush">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">AM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-warning text-white rounded-circle">SW</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">RN</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
</div>
</div>
<div class="py-3 text-center border-top">
<a href="#" class="text-sm text-muted font-weight-bold">See all messages</a>
</div>
</div>Languages
Show code
Deutsch
English(UK)
Français<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
<img src="../../assets/img/icons/flags/de.svg"> Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img src="../../assets/img/icons/flags/gb.svg"> English(UK)
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img src="../../assets/img/icons/flags/fr.svg"> Français
</a>
</li>
</ul>