Bootstrap - Dropdown menus

bootstrap

Can we add dropdown menu to anything?

Yes. You can add dropdown menus to nearly anything, including the navbar, tabs, and pills.

What does the drop-down plugin do to your DOM?

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

How can I make a drop-down menu?

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

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">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How can we make the menu expand upward instead of downward?

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How can we right-align a menu?

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.

May require additional positioning: Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

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

How can we add a header to a dropdown menu?

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

How can we add a divider to a dropdown menu?

Add a divider to separate series of links in a dropdown menu.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

How can we disable a menu item?

Add .disabled to a <li> in the dropdown to disable the link.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

How can we implement a split button dropdown menu?

A single button does not have a line between the arrow and the label. With a split button, there is a vertical line between the arrow and the label.

Create split button dropdowns with the same markup changes, only with a separate button.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How can we add a drop-down menu to a link or a button?

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
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

How can we keep URLs intact with link buttons?

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" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

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

How can we create a drop-down menu using 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.

How can we toggle a drop-down menu?

Use the toggle method:

.dropdown('toggle')

Where do drop-down events get fired?

All dropdown events are fired at the .dropdown-menu's parent element.

What is the purpose of the relatedTarget property for drop-down events?

All dropdown events have a relatedTarget property, whose value is the toggling anchor element.

What are the event types supported by drop-down menu?

  1. show.bs.dropdown: This event fires immediately when the show instance method is called.
  2. shown.bs.dropdown: This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
  3. hide.bs.dropdown: This event is fired immediately when the hide instance method has been called.
  4. 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…
})
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License