Bootstrap - Dropdowns

In this tutorial we will learn about dropdowns in Bootstrap.

To use the dropdowns we have to include the dropdown.js file.

Sample dropdowns

To create a dropdowns we use the .dropdown class and wrap the content inside.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Output:

In the above example we have created a default style button using the .btn .btn-default classes and when it is clicked the dropdown menu opens.

The menu items are unordered list items and we have given the opening ul tag the .dropdown-menu class.

Dropup

We can make the menu of a dropdown open upwards by adding the .dropup class in the parent element.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Output:

Align dropdown menu

In Bootstrap, a dropdown menu by default is automatically positioned 100% from the top and along the left side of its parent.

We can align the dropdown menu to the right using the .dropdown-menu-right class.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Output:

Adding header to the dropdown menus

We add the dropdown header using the .dropdown-header class.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li class="dropdown-header">Header</li>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Output:

Adding divider to the dropdown menu

We can add divider to the dropdown menu using the .divider class.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu Item 2</a></li>
  </ul>
</div>

Output:

Disable menu item

To disable a menu item we add the .disabled class to the item.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
          type="button" id="dropdownMenu" 
          data-toggle="dropdown" 
          aria-haspopup="true"
          aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 
      aria-labelledby="dropdownMenu">
    <li><a href="#">Menu Item 1</a></li>
    <li class="disabled"><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Output: