LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2017 min read

Dropdowns

Learn Bootstrap's dropdown component: .dropdown, .dropdown-toggle, .dropdown-menu, dropdown items, and dropdown directions.

Introduction

Dropdowns show a hidden list of options that reveals itself when the user clicks a toggle element — perfect for menus, filters, or user account actions that don't need to be visible all the time. Like modals, Bootstrap dropdowns are powered by `data-bs-*` attributes and require no custom JavaScript for standard use.

What You Will Learn
  • The core .dropdown, .dropdown-toggle, and .dropdown-menu structure.
  • How to build dropdown items, dividers, and headers.
  • Dropdown directions and split-button dropdowns.
  • Using dropdowns inside a navbar and dark-themed menus.

A dropdown wraps a toggle button and a menu list inside a `.dropdown` container. The toggle carries `data-bs-toggle="dropdown"`, and the menu is a `<ul class="dropdown-menu">` sitting as its sibling.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Archive</a></li>
  </ul>
</div>
What Renders

Click Run to see what this code prints.

Each option in the menu is a `.dropdown-item`. Add `.dropdown-divider` for a thin separator line between groups of items, and `.dropdown-header` for a small bold label introducing a section.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><a class="dropdown-item" href="#">Settings</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item text-danger" href="#">Sign Out</a></li>
</ul>
What Renders

Click Run to see what this code prints.

By default the menu opens downward. Add `.dropup`, `.dropend`, or `.dropstart` to the outer `.dropdown` container to flip the opening direction — useful when a dropdown near the bottom of the viewport would otherwise be cut off.

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
  </ul>
</div>
What Renders

Click Run to see what this code prints.

Split Button Dropdowns

A split-button dropdown separates the main action from the menu toggle into two adjacent buttons, wrapped in `.btn-group`. Clicking the main button triggers its own action directly; clicking the small caret button opens the menu.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Save</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="#">Save as Draft</a></li>
    <li><a class="dropdown-item" href="#">Save and Publish</a></li>
  </ul>
</div>
What Renders

Click Run to see what this code prints.

As shown in the navbar lesson, wrapping a `.nav-item` with `.dropdown` and using `.nav-link.dropdown-toggle` as the trigger lets you nest a dropdown menu naturally inside navigation, grouping related links under a single label.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
    Resources
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Docs</a></li>
    <li><a class="dropdown-item" href="#">Blog</a></li>
  </ul>
</li>
What Renders

Click Run to see what this code prints.

Dark Dropdown Menus

Add `.dropdown-menu-dark` to the `<ul>` to switch the menu to a dark background with light text, useful for dropdowns living inside a dark-themed navbar or sidebar.

<ul class="dropdown-menu dropdown-menu-dark">
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><a class="dropdown-item" href="#">Log Out</a></li>
</ul>
What Renders

Click Run to see what this code prints.

Common Mistakes

Avoid These Mistakes
  • Forgetting data-bs-toggle="dropdown" on the toggle element, so clicking it does nothing.
  • Placing .dropdown-menu outside the .dropdown wrapper, breaking Bootstrap's positioning logic.
  • Using <button> for dropdown-item links that should navigate, or <a> for items that should submit an action, mismatching semantics.
  • Forgetting aria-expanded on the toggle, hurting screen reader accessibility.

Best Practices

  • Keep dropdown menus short — long lists are better served by a dedicated page or search.
  • Use dropdown-divider and dropdown-header to group related items in longer menus.
  • Use split-button dropdowns only when there truly is a distinct primary action.
  • Add text-danger to destructive dropdown items (like "Delete" or "Sign Out") for visual warning.
  • Test dropdown behavior near viewport edges and use dropup/dropend when menus would get cut off.

Frequently Asked Questions

Yes, dropdown positioning and toggling are powered by Bootstrap's JS (which itself depends on Popper.js for smart positioning near viewport edges).

Yes, add .px-4.py-3 to a wrapping element inside the menu and build a normal form — commonly used for quick login or filter dropdowns.

Get the toggle element, create a bootstrap.Dropdown instance from it, and call .hide() on that instance.

It removes the left border/margin from the caret-only button so it visually fuses with the adjacent main action button inside a .btn-group.

Key Takeaways

  • A dropdown needs .dropdown (wrapper), .dropdown-toggle (trigger), and .dropdown-menu (list).
  • .dropdown-item styles each clickable row; .dropdown-divider and .dropdown-header organize groups.
  • .dropup / .dropend / .dropstart change which direction the menu opens.
  • Split-button dropdowns separate a primary action from the menu toggle using .btn-group.
  • Dropdowns nest naturally inside navbar .nav-item elements.
  • .dropdown-menu-dark switches the menu to a dark color scheme.

Summary

Dropdowns round out the interactive component patterns you've now seen repeated across buttons, alerts, modals, and navbars — a data-bs-toggle trigger paired with a hidden panel that Bootstrap's JavaScript shows and hides for you. Next, you'll learn the carousel, Bootstrap's component for cycling through slides of content or images.

Next Lesson →

Carousel