Skip to main content

Dropdowns in Bootstrap 5

Bootstrap Dropdowns​

Dropdowns are a commonly used user interface element in web development that allow users to select an option from a list.

Bootstrap provides a convenient and easy way to create dropdowns using its built-in dropdown component.

As an example:

Editor

Loading...

In this example:

  • We have created a dropdown using the <div> element with the class dropdown.
  • Inside the div, we have added a button element with the classes btn btn-secondary dropdown-toggle to specify that it is a dropdown button.
  • We have also added the data-bs-toggle="dropdown" attribute to specify that it is a dropdown.
  • Inside the dropdown, we have added a div with the class dropdown-menu attribute to specify that it is a dropdown menu.
  • This div contains a list of options, which are implemented as <a> elements with the class dropdown-item.

In Bootstrap, you can add a divider between items in a dropdown menu using the dropdown-divider class.

As an example:

Editor

Loading...

The dropdown-header class that can be used to add a header to a dropdown menu.

As an example:

Editor

Loading...

In this example:

  • We have added a header with the text "Header Text" to the dropdown menu using the dropdown-header class.
  • The header is enclosed in an li element to ensure it appears correctly in the dropdown menu.
  • We have also added a horizontal divider using the dropdown-divider class to separate Option 2 and Option 3.

Disable and Active items​

To disable or activate items in a Bootstrap dropdown menu, you can add the disabled or active class to the corresponding a or button element within the dropdown menu.

As an example:

<div class="dropdown">
     <button
          class="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
     >
          Dropdown button
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Regular Item</a></li>
          <li><a class="dropdown-item active" href="#">Active Item</a></li>
          <li><a class="dropdown-item disabled" href="#">Disabled Item</a></li>
          <li><hr class="dropdown-divider" /></li>
          <li><a class="dropdown-item" href="#">Regular Item 2</a></li>
     </ul>
</div>

In this example:

  • We have added the active class to the second item in the dropdown menu to make it the active item.
  • We have also added the disabled class to the third item in the dropdown menu to disable it.

By default, Bootstrap dropdown menus are positioned relative to their parent element. However, you can also position dropdown menus using the data-bs-placement attribute.

Here are the possible values for the data-bs-placement attribute:

  • top: Positions the dropdown menu above the parent element
  • bottom: Positions the dropdown menu below the parent element
  • start: Positions the dropdown menu to the left of the parent element (for left-to-right languages)
  • end: Positions the dropdown menu to the right of the parent element (for left-to-right languages)

As an example:

<div class="dropdown">
     <button
          class="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
     >
          Dropdown button
     </button>
     <ul
          class="dropdown-menu"
          aria-labelledby="dropdownMenuButton"
          data-bs-placement="top"
     >
          <li><a class="dropdown-item" href="#">Option 1</a></li>
          <li><a class="dropdown-item" href="#">Option 2</a></li>
          <li><a class="dropdown-item" href="#">Option 3</a></li>
     </ul>
</div>

In this example:

  • We have positioned the dropdown menu above the parent element by setting the data-bs-placement attribute to top.
tip

If there is not enough space for the dropdown menu to be displayed in the specified position, it will be repositioned to fit within the viewport.

Dropdown Text​

For using text in dropdown you can use .dropdown-item-text which is a class in Bootstrap 5 that can be used to style the text within dropdown items. It is used as a child of the .dropdown-item class.

As a example:

<div class="dropdown">
     <button
          class="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
     >
          Dropdown Button Text
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Option 1</a></li>
          <li>
               <a class="dropdown-item" href="#">Option 2</a>
               <p class="dropdown-item-text">Additional text</p>
          </li>
          <li><a class="dropdown-item" href="#">Option 3</a></li>
     </ul>
</div>

In this example:

  • The .dropdown-item-text class is used within the second dropdown item to add some additional text below the main text of the dropdown item.