Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs. The examples shown here use semantic <ul> elements where appropriate, but custom markup is supported.

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

<div class="dropdown">
  <button class="btn btn-primary" id="dropdownMenuButton" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

And with <a> elements:

<div class="dropdown">
  <a class="btn btn-primary" id="dropdownMenuLink" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown link</a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

The best part is you can do this with any button variant, too:

<div class="dropdown">
  <button class="btn btn-danger" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Directions

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

<div class="dropup">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropup</button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

<div class="dropright">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropright</button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.

<div class="dropleft">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropleft</button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Menu items

Historically dropdown menu contents had to be links, but that’s no longer the case. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Active

Add .active to items in the dropdown to style them as active. To convey the active state to assistive technologies, use the aria-current attribute — using the page value for the current page, or true for the current item in a set.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#" aria-current="true">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Disabled

Add .disabled to items in the dropdown to style them as disabled.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Menu alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).

<div class="dropdown mb-3">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Right-aligned menu</button>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the data-display="static" attribute and use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="dropdown d-inline-flex">
  <button class="btn btn-primary" data-toggle="dropdown" data-display="static" type="button" aria-expanded="false">Left-aligned but right aligned when large screen</button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="dropdown d-inline-flex">
  <button class="btn btn-primary" data-toggle="dropdown" data-display="static" type="button" aria-expanded="false">Right-aligned but left aligned when large screen</button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Note that you don’t need to add a data-display="static" attribute to dropdown buttons in navbars, since Popper.js isn’t used in navbars.

Dropdown options

Use data-offset or data-reference to change the location of the dropdown.

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown" data-offset="16, 16" type="button" aria-expanded="false">Offset</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Usage

The dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

On touch-enabled devices, opening a dropdown adds empty mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown trigger</button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>