Dropdowns in Bootstrap 5

Single Button Dropdowns

Wrap the dropdown's toggle and dropdown menu within .dropdown, or another element that declares position: relative;.

<!-- Single Button Dropdown -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <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</a></li>
  </ul>
</div>

Dropdown Button Variants

Split Button Dropdowns

<!-- Split Button Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Dropdown Sizing

Dark Dropdowns

<!-- Dark Dropdown -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dark dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Dropdown Directions

Dropdown Menu Items

<!-- Dropdown Menu Items -->
<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Text item</span></li>
  <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">Disabled item</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated item</a></li>
</ul>

Dropdown Forms

Dropdown with Custom Content

Custom content dropdown

John Doe

john@example.com

---

Profile

Settings

Logout

Auto Close Behavior

<!-- Auto Close Options -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" data-bs-auto-close="true">
    Default (inside)
  </button>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" data-bs-auto-close="outside">
    Outside click
  </button>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
          data-bs-toggle="dropdown" data-bs-auto-close="false">
    Manual close
  </button>
</div>

JavaScript Methods

// Get dropdown instance
var myDropdown = document.getElementById('myDropdown')
var bsDropdown = new bootstrap.Dropdown(myDropdown)

// Toggle dropdown
bsDropdown.toggle()

// Show dropdown
bsDropdown.show()

// Hide dropdown
bsDropdown.hide()

// Event listeners
myDropdown.addEventListener('show.bs.dropdown', function () {
  console.log('Dropdown is showing')
})

myDropdown.addEventListener('shown.bs.dropdown', function () {
  console.log('Dropdown is shown')
})

Accessibility

Best Practices

Custom CSS Examples

/* Custom dropdown styles */
.custom-dropdown .dropdown-menu {
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.custom-dropdown .dropdown-item {
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s;
}

.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item:focus {
  background-color: #e9ecef;
  color: #495057;
}

.custom-dropdown .dropdown-item.active {
  background-color: #0d6efd;
  color: white;
}

/* Animated dropdown */
.dropdown-menu {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom arrow */
.custom-arrow::after {
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  margin-left: 0.5em;
  vertical-align: middle;
}