Bootstrap 5 Framework
Dropdowns
Dropdowns in Bootstrap 5
Bootstrap dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin.
1. Basic Dropdown Structure
A dropdown requires a trigger button and a menu container:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
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 here</a></li>
</ul>
</div>
Note: The
data-bs-toggle="dropdown" attribute is required to initialize the dropdown functionality.
2. Dropdown Button Variations
Use any button style with dropdowns:
<!-- Primary Dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Primary
</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>
<!-- Link Dropdown -->
<div class="dropdown">
<a class="btn btn-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">
Dropdown link
</a>
<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>
3. Dropdown Directions
Control the direction dropdowns expand:
<!-- Dropup -->
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropup
</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>
<!-- Dropend (right) -->
<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropend
</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>
<!-- Dropstart (left) -->
<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropstart
</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>
Tip: Use dropup for dropdowns near the bottom of the viewport to ensure the menu is visible.
4. Menu Alignment
Align dropdown menus to the right or left:
<!-- Right Aligned -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
<!-- Responsive Alignment -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Responsive alignment
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
5. Dropdown Headers and Dividers
Add headers and dividers to organize menu items:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Another header</h6></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
6. Active and Disabled Items
Style dropdown items to indicate states:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#">Active link</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
</ul>
</div>
Note: Disabled items are styled but can still be clicked unless you add JavaScript to prevent the action.
7. Dropdown with Forms
Place forms inside dropdown menus:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropdown form
</button>
<form class="dropdown-menu p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail" class="form-label">
Email address
</label>
<input type="email" class="form-control"
id="exampleDropdownFormEmail"
placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword" class="form-label">
Password
</label>
<input type="password" class="form-control"
id="exampleDropdownFormPassword"
placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
Warning: Add the
onclick="event.stopPropagation()" to form elements to prevent the dropdown from closing when clicking inside the form.
8. Split Button Dropdowns
Create split button dropdowns with separate actions:
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
9. Dark Dropdowns
Create dark-themed dropdown menus:
<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 active" href="#">Active action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
10. Dropdown with Text
Include non-interactive text in dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
11. Auto Close Behavior
Control when dropdowns close with the data-bs-auto-close attribute:
<!-- Close on outside click (default) -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true">
Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<!-- Close on inside click -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="inside">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<!-- Manual close -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="false">
Manual close
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
12. JavaScript API
Control dropdowns programmatically:
// Initialize dropdown
const dropdownElement = document.getElementById('myDropdown');
const dropdown = new bootstrap.Dropdown(dropdownElement);
// Show dropdown
dropdown.show();
// Hide dropdown
dropdown.hide();
// Toggle dropdown
dropdown.toggle();
// Update dropdown position
dropdown.update();
// Dispose dropdown
dropdown.dispose();
// Listen to events
dropdownElement.addEventListener('show.bs.dropdown', event => {
console.log('Dropdown is about to be shown');
});
dropdownElement.addEventListener('shown.bs.dropdown', event => {
console.log('Dropdown has been shown');
});
dropdownElement.addEventListener('hide.bs.dropdown', event => {
console.log('Dropdown is about to be hidden');
});
dropdownElement.addEventListener('hidden.bs.dropdown', event => {
console.log('Dropdown has been hidden');
});
Exercise
Create a user profile dropdown that includes:
- A split button with the user's name and dropdown toggle
- A dropdown header with "Account Settings"
- Menu items: "Profile", "Settings" (active), "Notifications"
- A divider
- Another header with "Actions"
- Menu items: "Help", "Sign Out"
- Right-align the dropdown menu
- Use a primary button color scheme
- Add proper ARIA attributes for accessibility