Bootstrap Dropdowns
A dropdown is a toggleable menu that lets you pack a list of links or actions into a single button, keeping your interface tidy. Bootstrap 5 dropdowns are built with plain HTML markup and powered by a small bundled JavaScript plugin (which uses the Popper library to position the menu). In this lesson you will build your first dropdown, learn the class names that make it work, and explore common variations like directions, alignment, and menu items.
How a Bootstrap Dropdown Works
Every dropdown is made of two parts wrapped in a container. The container carries the .dropdown class, a toggle button carries .dropdown-toggle plus the data-bs-toggle="dropdown" attribute, and the menu itself is a .dropdown-menu element holding one or more .dropdown-item links. Bootstrap watches for a click on the toggle and shows or hides the menu for you.
Because the show/hide behavior is driven by JavaScript, remember to include the Bootstrap bundle script (which contains Popper) before the closing body tag. Without it, the button will render but clicking it will do nothing.
A basic dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Options
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dividers, Headers, and Text
You can organize longer menus with a few helper elements. A .dropdown-divider draws a thin horizontal line between groups, a .dropdown-header labels a section, and .dropdown-item-text places non-clickable text inside the menu.
Organizing a menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Account</h6></li>
<li><a class="dropdown-item" href="#">My profile</a></li>
<li><a class="dropdown-item" href="#">Billing</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Log out</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Directions and Alignment
By default a menu opens below the toggle. Swap the container class to change the direction: .dropup opens upward, .dropend opens to the right, and .dropstart opens to the left. To line the menu up with the right edge of the button, add .dropdown-menu-end to the menu.
- .dropdown — opens the menu downward (the default)
- .dropup — opens the menu upward
- .dropend — opens the menu to the right
- .dropstart — opens the menu to the left
- .dropdown-menu-end — right-aligns the menu under the toggle
With just these classes you can build account menus, filter selectors, and action lists. Next you will practice assembling one yourself.
Exercise: Bootstrap Dropdowns
What attribute must a dropdown's toggle button or link have so clicking it opens the menu?
