Skip to main content

Components

Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.

Dropdowns

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.

Contents

Example

Wrap the dropdown’s trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then, add the menu’s HTML.

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>

Button elements

You can optionally use <button> elements in your dropdowns instead of <a>s.

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

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 only with CSS and may need some additional styles for exact alignment.

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</div>

Add a header to label sections of actions in any dropdown menu.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Separate groups of related menu items with a divider.

<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 class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Disabled menu items

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="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.

Note: 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.

Via data attributes

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

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

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </a>

  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.

Options

None.

Methods

Method Description
$().dropdown('toggle') Toggles the dropdown menu of a given navbar or tabbed navigation.

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.

Event Description
show.bs.dropdown This event fires immediately when the show instance method is called.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})