# Dropdowns

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

Bootstrap Dropdowns documentation

## 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 dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                              Dropdown button
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                              <li><a class="dropdown-item" href="#">Action</a></li>
                              <li><a class="dropdown-item" href="#">Another action</a></li>
                              <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                          </div>

And with `<a>` elements:

Dropdown link

                          <div class="dropdown">
                            <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                              Dropdown link
                            </a>

                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                              <li><a class="dropdown-item" href="#">Action</a></li>
                              <li><a class="dropdown-item" href="#">Another action</a></li>
                              <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                          </div>

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

                          <!-- Example single danger button -->
                          <div class="btn-group">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                              Action
                            </button>
                            <ul class="dropdown-menu">
                              <li><a class="dropdown-item" href="#">Action</a></li>
                              <li><a class="dropdown-item" href="#">Another action</a></li>
                              <li><a class="dropdown-item" href="#">Something else here</a></li>
                              <li><hr class="dropdown-divider"></li>
                              <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                          </div>

## Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

                          <!-- Large button groups (default and split) -->
                          <div class="btn-group">
                            <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                              Large button
                            </button>
                            <ul class="dropdown-menu">
                              ...
                            </ul>
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-primary btn-lg" type="button">
                              Large split button
                            </button>
                            <button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                              <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                              ...
                            </ul>
                          </div>

                          <!-- Small button groups (default and split) -->
                          <div class="btn-group">
                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                              Small button
                            </button>
                            <ul class="dropdown-menu">
                              ...
                            </ul>
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-primary btn-sm" type="button">
                              Small split button
                            </button>
                            <button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                              <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                              ...
                            </ul>
                          </div>

## Directions

###### Dropup

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

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

                          <!-- Split dropup button -->
                          <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary">
                              Split dropup
                            </button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                              <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                              <!-- Dropdown menu links -->
                            </ul>
                          </div>

###### dropend

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

                          <!-- Default dropend button -->
                          <div class="btn-group dropend">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                              dropend
                            </button>
                            <ul class="dropdown-menu">
                              <!-- Dropdown menu links -->
                            </ul>
                          </div>

                          <!-- Split dropend button -->
                          <div class="btn-group dropend">
                            <button type="button" class="btn btn-primary">
                              Split dropend
                            </button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                              <span class="sr-only">Toggle dropend</span>
                            </button>
                            <ul class="dropdown-menu">
                              <!-- Dropdown menu links -->
                            </ul>
                          </div>

###### dropstart

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

                          <!-- Default dropstart button -->
                          <div class="btn-group dropstart">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                              dropstart
                            </button>
                            <ul class="dropdown-menu">
                              <!-- Dropdown menu links -->
                            </ul>
                          </div>

                          <!-- Split dropstart button -->
                          <div class="btn-group">
                            <div class="btn-group dropstart" role="group">
                              <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="sr-only">Toggle dropstart</span>
                              </button>
                              <ul class="dropdown-menu">
                                <!-- Dropdown menu links -->
                              </ul>
                            </div>
                            <button type="button" class="btn btn-primary">
                              Split dropstart
                            </button>
                          </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.

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

## Disabled

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

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

## 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|-xxl}-right`.

                          <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-display="static" aria-expanded="false">
                              Left-aligned but right aligned when large screen
                            </button>
                            <ul class="dropdown-menu dropdown-menu-lg-right">
                              <li><button class="dropdown-item" type="button">Action</button></li>
                              <li><button class="dropdown-item" type="button">Another action</button></li>
                              <li><button class="dropdown-item" type="button">Something else here</button></li>
                            </ul>
                          </div>

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

                          <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-display="static" aria-expanded="false">
                              Right-aligned but left aligned when large screen
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
                              <li><button class="dropdown-item" type="button">Action</button></li>
                              <li><button class="dropdown-item" type="button">Another action</button></li>
                              <li><button class="dropdown-item" type="button">Something else here</button></li>
                            </ul>
                          </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.

## Menu content

##### Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

                          <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
                            <p>
                              Some example text that's free-flowing within the dropdown menu.
                            </p>
                            <p class="mb-0">
                              And this is more example text.
                            </p>
                          </div>

##### Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

                          <div class="dropdown-menu">
                            <form class="px-4 py-3">
                              <div class="mb-3">
                                <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                              </div>
                              <div class="mb-3">
                                <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                              </div>
                              <div class="mb-3">
                                <div class="form-check">
                                  <input type="checkbox" class="form-check-input" id="dropdownCheck">
                                  <label class="form-check-label" for="dropdownCheck">
                                    Remember me
                                  </label>
                                </div>
                              </div>
                              <button type="submit" class="btn btn-primary">Sign in</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">New around here? Sign up</a>
                            <a class="dropdown-item" href="#">Forgot password?</a>
                          </div>

## Dropdown options

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

                          <div class="d-flex">
                            <div class="dropdown me-1">
                              <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-offset="10,20">
                                Offset
                              </button>
                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                              </ul>
                            </div>
                            <div class="btn-group">
                              <button type="button" class="btn btn-primary">Reference</button>
                              <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-reference="parent">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                              </ul>
                            </div>
                          </div>

## Usage

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

##### Via data attributes

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

                    <div class="dropdown">
                      <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown trigger
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dLabel">
                        ...
                      </ul>
                    </div>

##### Via JavaScript

Call the dropdowns via JavaScript:

                    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
                    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
                      return new bootstrap.Dropdown(dropdownToggleEl)
                    })

## Methods

Method | Description
--- | ---
`toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation.
`show` | Shows the dropdown menu of a given navbar or tabbed navigation.
`hide` | Hides the dropdown menu of a given navbar or tabbed navigation.
`update` | Updates the position of an element's dropdown.
`dispose` | Destroys an element's dropdown.
`getInstance` | Static method which allows you to get the dropdown instance associated with a DOM element.

## Events

All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.

Method | Description
--- | ---
`show.bs.dropdown` | Fires immediately when the show instance method is called.
`shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed.
`hide.bs.dropdown` | Fires immediately when the hide instance method has been called.
`hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.

                    var myDropdown = document.getElementById('myDropdown')
                    myDropdown.addEventListener('show.bs.dropdown', function () {
                      // do something...
                    })