Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add dropdowns with Bootstrap 5.

Dropdowns

Dropdowns are toggleable overlays for display lists of items.

The Bootstrap 5 implementation depends on Popper.js.

For example, we can write:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">foo</a></li>
    <li><a class="dropdown-item" href="#">bar</a></li>
    <li><a class="dropdown-item" href="#">baz</a></li>
  </ul>
</div>

We have the div with the dropdown class.

The button lets us toggle the dropdown on and off.

The data-toggle attribute is also needed to make the button a toggle.

It has the dropdown-toggle class to add the toggle.

Then we add the ul with the dropdown-menu class to add the list.

The list items have the dropdown-item class.

The button can be replaced with an a element.

For example, we can write:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">
    Dropdown link
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">foo</a></li>
    <li><a class="dropdown-item" href="#">bar</a></li>
    <li><a class="dropdown-item" href="#">baz</a></li>
  </ul>
</div>

We have an a element instead with the dropdown-toggle class instead of a button.

Also, we can change the button variant.

For example, we can write:

<div class="dropdown">
  <a class="btn btn-danger dropdown-toggle" href="#" data-toggle="dropdown">
    Dropdown link
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">foo</a></li>
    <li><a class="dropdown-item" href="#">bar</a></li>
    <li><a class="dropdown-item" href="#">baz</a></li>
  </ul>
</div>

to change the class of the button to .btn-danger .

#web-development #programming #technology #software-development #javascript #bootstrap 5