Bootstrap Dropdown: Menus, Alignment and Hover (Bootstrap 5)

A Bootstrap dropdown is a button that opens a small menu of links or actions: an account menu, a “More” menu in a toolbar, or a sort selector. Dropdowns are positioned with the Popper library and work from data attributes, so the markup is usually all you need. This guide covers the markup, menu items, alignment and direction, split buttons, dark menus, forms inside dropdowns, opening on hover, closing behavior, the JavaScript API, and common problems. Everything is for Bootstrap 5.3.

A working dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Sort by
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="?sort=new">Newest</a></li>
    <li><a class="dropdown-item" href="?sort=popular">Most popular</a></li>
    <li><a class="dropdown-item" href="?sort=price">Price</a></li>
  </ul>
</div>

Load bootstrap.bundle.min.js, which includes Popper. With bootstrap.min.js alone, dropdowns throw an error asking for Popper. No initialization code is needed.

dropdown-toggle adds the small caret. Leave it off for an icon-only button, and give that button an aria-label.

Menu items

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item active" href="/profile" aria-current="true">Profile</a></li>
  <li><a class="dropdown-item" href="/billing">Billing</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Team (Pro only)</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><button class="dropdown-item text-danger" type="button">Sign out</button></li>
  <li><span class="dropdown-item-text small text-body-secondary">Signed in as ana@example.com</span></li>
</ul>

• Links and buttons both work as .dropdown-item. Use links for navigation and buttons for actions.
• active highlights the current choice, and disabled grays an item out.
• dropdown-header labels a group, and dropdown-divider separates groups.
• dropdown-item-text is plain text that can’t be clicked.

Align the menu

The menu lines up with the left edge of the button. For a button at the right of the page, such as an account menu, align it to the right:

<ul class="dropdown-menu dropdown-menu-end">...</ul>

Responsive versions change the alignment from a breakpoint up, for example dropdown-menu-lg-end. To center the menu under the button, use dropdown-center on the wrapper instead of dropdown.

Open up, left, or right

Change the wrapper class:

Wrapper class	Menu opens
dropdown	Below (default)
dropup	Above
dropup-center	Above, centered
dropend	To the right
dropstart	To the left

If there isn’t room, Popper flips the menu to the opposite side.

Split buttons

A split button has a main action and a separate caret for more options:

<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">More save options</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Save as draft</button></li>
    <li><button class="dropdown-item" type="button">Save and publish</button></li>
  </ul>
</div>

More button groups are in the Bootstrap buttons guide.

Dark dropdown menus

Add data-bs-theme="dark" to the menu, or to a parent such as a dark navbar:

<ul class="dropdown-menu" data-bs-theme="dark">...</ul>

The older dropdown-menu-dark class still works but is deprecated in Bootstrap 5.3. Dropdowns also follow site-wide dark mode automatically.

Dropdowns in a navbar

Inside a navbar, the dropdown is a nav item with a link as the toggle:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Products</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/themes">Themes</a></li>
    <li><a class="dropdown-item" href="/templates">Templates</a></li>
  </ul>
</li>

On phones, the menu opens inside the collapsed navbar. The full navbar setup is in the Bootstrap navbar guide.

A form inside a dropdown

Put a form straight into .dropdown-menu with some padding. Set data-bs-auto-close="outside" on the toggle so clicking inside the form doesn’t close the menu:

<div class="dropdown">
  <button class="btn btn-outline-primary dropdown-toggle" type="button"
    data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Sign in</button>
  <form class="dropdown-menu p-3" style="min-width: 16rem;">
    <div class="mb-3">
      <label for="dd-email" class="form-label">Email</label>
      <input type="email" class="form-control" id="dd-email">
    </div>
    <button type="submit" class="btn btn-primary w-100">Sign in</button>
  </form>
</div>

When the menu closes

data-bs-auto-close on the toggle controls it:

Value	Closes on
true (default)	A click inside or outside the menu
inside	A click inside the menu only
outside	A click outside the menu only
false	Only the toggle button or Escape

Open a dropdown on hover

Bootstrap dropdowns open on click on purpose, because hover doesn’t exist on touch screens. If you want hover on desktop anyway, add it with CSS for devices that have a mouse, and keep the click behavior:

@media (hover: hover) and (min-width: 992px) {
  .dropdown-hover:hover > .dropdown-menu { display: block; margin-top: 0; }
}

Add dropdown-hover to the wrapper. Removing the top margin stops the menu from closing while the pointer crosses the gap.

Control dropdowns with JavaScript

const dropdown = bootstrap.Dropdown.getOrCreateInstance('#sort-toggle')
dropdown.show()
dropdown.hide()
dropdown.toggle()

Events fire on the toggle: show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, and hidden.bs.dropdown. The menu’s offset from the button is the offset option, [0, 2] by default, or data-bs-offset="0,8" on the toggle.

Style dropdowns

.dropdown-menu {
  --bs-dropdown-min-width: 12rem;
  --bs-dropdown-border-radius: .75rem;
  --bs-dropdown-link-hover-bg: #eef2ff;
  --bs-dropdown-link-active-bg: #2f55ff;
  --bs-dropdown-item-padding-y: .5rem;
}

In Sass, $dropdown-min-width (10rem), $dropdown-padding-y, $dropdown-link-hover-bg, and $dropdown-link-active-bg set the defaults.

Common problems

The menu doesn’t open. Bootstrap’s JavaScript isn’t loaded, or it’s bootstrap.min.js without Popper. Use bootstrap.bundle.min.js.

The menu is cut off inside a card or table. A parent has overflow: hidden or overflow: auto. Set data-bs-boundary="viewport", or move the dropdown out of that element.

The menu opens off the screen edge. Add dropdown-menu-end when the button is near the right edge.

It worked in Bootstrap 4 but not 5. Rename data-toggle to data-bs-toggle, and dropdown-menu-right to dropdown-menu-end.

FAQ

How do I make a dropdown in Bootstrap 5?

Wrap a button with class="dropdown-toggle" and data-bs-toggle="dropdown" and a <ul class="dropdown-menu"> of .dropdown-item links in a <div class="dropdown">. Load bootstrap.bundle.min.js, which includes Popper; no other code is needed.

How do I align a Bootstrap dropdown menu to the right?

Add dropdown-menu-end to the .dropdown-menu. Use a responsive version such as dropdown-menu-lg-end to align it right only from a breakpoint up.

How do I make a Bootstrap dropdown open on hover?

Bootstrap opens dropdowns on click by design. To add hover on desktop, use CSS such as .dropdown-hover:hover > .dropdown-menu { display: block; margin-top: 0; } inside a @media (hover: hover) query, and keep the click toggle for touch screens.

How do I keep a Bootstrap dropdown open when clicking inside it?

Add data-bs-auto-close="outside" to the toggle button. The menu then stays open on clicks inside it, which is what forms and filters in a dropdown need.

Why is my Bootstrap dropdown not working?

Usually Popper is missing: load bootstrap.bundle.min.js instead of bootstrap.min.js. Also check that the toggle uses data-bs-toggle="dropdown" (not the Bootstrap 4 data-toggle), and that the JavaScript isn’t loaded twice.