Bootstrap 4 Dropdowns

Bootstrap 4 Dropdowns component

Bootstrap dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.

Basic Bootstrap 4 version

Edit in sandbox 
        
            
<!-- Basic dropdown -->
<button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">Basic dropdown</button>

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
<!-- Basic dropdown -->

Above is an example template for Dropdowns in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Edit in sandbox 
        
            
      <div class="dropdown">
        <button data-mdb-button-init
          data-mdb-ripple-init data-mdb-dropdown-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-mdb-toggle="dropdown"
          aria-expanded="false"
        >
          Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>