Bootstrap Dropdowns

Dropdowns reveal a list of actions or links when a trigger element is clicked. This lesson covers building dropdowns, aligning menus, and using dividers and headers.

Bootstrap Dropdowns Overview

A dropdown pairs a trigger element (usually a button or link) with data-bs-toggle="dropdown" and a sibling .dropdown-menu containing .dropdown-item links. Bootstrap's JavaScript, powered by Popper for positioning, handles opening, closing, and keyboard navigation automatically.

Beyond the basic pattern, dropdowns support directional variants like dropup and dropend, menu alignment with dropdown-menu-end, and organizational elements like dropdown-divider and dropdown-header for grouping related items.

Concept	Description	Common Usage
data-bs-toggle="dropdown"	Marks the trigger element	Buttons or links that open a menu
.dropdown-menu	Container for the menu items	Holds dropdown-item links
.dropdown-item	Individual clickable menu entry	Actions or navigation links inside the menu
dropdown-divider / dropdown-header	Visual separator or group label	Organizing long menus into sections
dropup / dropend / dropstart	Alternate menu opening directions	Adjusting for available screen space

Bootstrap Dropdowns Example

<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><h6 class="dropdown-header">Account</h6></li>
    <li><a class="dropdown-item" href="/profile">View Profile</a></li>
    <li><a class="dropdown-item" href="/settings">Settings</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="/logout">Log Out</a></li>
  </ul>
</div>

The button triggers the dropdown via data-bs-toggle="dropdown", and Bootstrap automatically toggles the aria-expanded attribute and positions the dropdown-menu below it. A dropdown-header labels the first group, a dropdown-divider visually separates the destructive log out action, and text-danger emphasizes it.

Top 10 Bootstrap Dropdowns Examples

These are the dropdown structural patterns you'll build repeatedly for menus and actions.

#	Example	Syntax
1	Basic dropdown button	`<button class="btn dropdown-toggle" data-bs-toggle="dropdown">Menu</button>`
2	Dropdown menu wrapper	`<ul class="dropdown-menu">...</ul>`
3	Dropdown item link	`<li><a class="dropdown-item" href="#">Action</a></li>`
4	Disabled dropdown item	`<a class="dropdown-item disabled" href="#">Unavailable</a>`
5	Active dropdown item	`<a class="dropdown-item active" href="#">Current</a>`
6	Dropdown divider	`<li><hr class="dropdown-divider"></li>`
7	Dropdown header	`<li><h6 class="dropdown-header">Section</h6></li>`
8	Right-aligned menu	`<ul class="dropdown-menu dropdown-menu-end">...</ul>`
9	Dropup direction	`<div class="dropup">...</div>`
10	Split button dropdown	`<div class="btn-group"><button class="btn btn-primary">Save</button><button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button></div>`

Popular Real-World Bootstrap Dropdowns Examples

These dropdown patterns are common in navigation bars, user menus, and action toolbars.

Scenario	Pattern
User account menu	`<button class="btn dropdown-toggle" data-bs-toggle="dropdown"><img class="rounded-circle" src="avatar.jpg" width="24"> Jane</button>`
Navbar 'More' menu	`<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Products</a></li>`
Table row actions menu	`<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></button>`
Filter/sort dropdown	`<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Sort by</button>`
Split save/save-as button	`<div class="btn-group"><button class="btn btn-success">Save</button><button class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"></button></div>`
Language selector	`<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">English</button>`
Right-aligned notification menu	`<ul class="dropdown-menu dropdown-menu-end">...</ul>`
Grouped settings with headers	`<li><h6 class="dropdown-header">Preferences</h6></li>`

Best Practices

Use a real <button> for the dropdown trigger when it performs an action, not navigation.
Always include data-bs-toggle="dropdown" and let Bootstrap manage aria-expanded automatically.
Use dropdown-menu-end for menus near the right edge of the viewport to avoid overflow.
Group related items with dropdown-header and separate distinct groups with dropdown-divider.
Highlight destructive actions like 'Delete' or 'Log Out' with text-danger inside the menu.
Keep dropdown menus reasonably short; long menus are hard to scan and navigate by keyboard.
Test dropdown keyboard navigation (arrow keys, Escape) since Bootstrap wires this up automatically.

Common Mistakes

Forgetting data-bs-toggle="dropdown" on the trigger, so clicking does nothing.
Nesting the dropdown-menu outside of the .dropdown wrapper, breaking Popper positioning.
Not using dropdown-menu-end near a viewport edge, causing the menu to overflow off-screen.
Overusing dropdowns for primary navigation that would be clearer as visible top-level links.
Styling dropdown-item elements with custom padding that breaks keyboard focus outlines.
Placing too many unrelated actions in a single dropdown without headers or dividers.

Key Takeaways

Dropdowns pair a trigger with data-bs-toggle="dropdown" and a sibling dropdown-menu.
dropdown-item, dropdown-divider, and dropdown-header organize menu content.
Alignment classes like dropdown-menu-end adjust where the menu opens relative to the trigger.
Directional variants (dropup, dropend, dropstart) adapt to available screen space.
Bootstrap's JavaScript, powered by Popper, handles positioning and keyboard interaction automatically.

Pro Tip

For a 'split button' pattern, place a primary action button and a small dropdown-toggle button together inside a .btn-group so users can click the main action directly or open the menu for alternatives.