Bootstrap Dropdowns

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Example Explained

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

Dropdown Divider

The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:

Disable and Active items

Highlight a specific dropdown item with the .active class (adds a blue background color).

To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

Dropdown Position

To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:

Dropup

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

Dropdown Accessibility

To help improve accessibility for people using screen readers, you should include the following role and aria-* attributes, when creating a dropdown menu:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Complete Bootstrap Dropdown Reference

For a complete reference of all dropdown options, methods and events, go to our Bootstrap JS Dropdown Reference.