Dropdowns
A dropdown is a list of actions that appears when you click a button and hides when you click elsewhere. It saves space: in the admin dashboard this is where the actions for a table row or the user menu are hidden. The menu position is calculated by the Popper library, which is included in bootstrap.bundle.min.js.
A simple dropdown
A dropdown wrapper, inside it a button with the dropdown-toggle class and data-bs-toggle="dropdown", followed by a dropdown-menu list with dropdown-item entries:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 200px">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Edit</button></li>
<li><button class="dropdown-item" type="button">Duplicate</button></li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item text-danger" type="button">Delete</button></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Click "Actions" and a list of three items opens under the button, with a line before "Delete". A click on an item, outside the menu, or the Escape key closes it. The arrow on the button comes from the dropdown-toggle class.
Menu parts
| Element | Class |
|---|---|
| Link or button item | dropdown-item |
| Divider | dropdown-divider on an <hr> |
| Group header | dropdown-header on an <h6> |
| Selected item | active |
| Unavailable item | disabled |
Direction and alignment
By default the menu opens downward, aligned to the button's left edge. Replace the wrapper with dropup, dropend or dropstart to open it upward, to the right or to the left. The dropdown-menu-end class on the list aligns the menu to the right edge — this is how the user menu in the right corner of the header is built:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-expand bg-body-tertiary" style="min-height: 200px; align-items: flex-start">
<div class="container-fluid">
<span class="navbar-brand">Tasko Admin</span>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Anna
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">anna@example.com</h6></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>In a navbar the wrapper is a nav-item dropdown item, and the button is a nav-link dropdown-toggle link. The menu with the email address opens under the name and does not stick out past the right edge.
Common mistake
Placing dropdown-menu somewhere other than right after the button, or forgetting the dropdown wrapper. Bootstrap looks for the menu next to the button inside a shared parent; if it is not there, the click does nothing or the menu opens in the wrong place. Keep the button and the list together in one wrapper.