Bootstrap Dropdowns

Dropdowns allow users to select an option from a list of choices.

Important Note:
Ensure dropdowns are keyboard-accessible for better usability.

Basic Dropdown

Dropdowns are created using a button and a dropdown menu.

Example:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
  </ul>
</div>

Output:

Dropdown Divider

Use a divider to separate items in a dropdown menu.

Example:

<li class="divider"></li>

Dropdown Header

Use dropdown-header to add a header inside the dropdown.

Example:

<li class="dropdown-header">Category 1</li>

Note: Dropdown headers provide a title for grouped menu items.

Disabled and Active Items

To disable an item, use disabled class (gets a light-grey text color and a “no-parking-sign” icon on hover). To highlight an item, use active (adds a blue background color).

Important Note:
Disabled items are not selectable but remain visible for context.

Dropdown Position

Dropdowns can be aligned to the right using the dropdown-menu-right class.

Example:

<ul class="dropdown-menu dropdown-menu-right">

Dropup

To make a dropdown appear above the button, use dropup class.

Example:

<div class="dropup">

Dropdown Accessibility

Ensure accessibility by using aria-expanded attributes.

Example:

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle" type="button" id="menu1"
    data-toggle="dropdown">Tutorials
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
  </ul>

</div>

Request more information

Bootstrap Dropdowns