Bootstrap Dropdowns

In this tutorial you will learn how to add dropdown menus to various components using the Bootstrap dropdown plugin.

Creating Dropdown Menus with Bootstrap

The dropdown menu is typically used inside the navigation header to display a list of related links when a user mouse hover or click on the trigger element.

You can use the Bootstrap dropdown plugin to add toggleable dropdown menus (i.e. open and close on click) to almost anything such as links, buttons or button groups, navbar, tabs and pills nav etc. without even writing a single line of JavaScript code.

Adding Dropdowns via Data Attributes

Bootstrap provides an easy and elegant mechanism for adding the dropdown menu to an element via data attributes. The following example will show you the minimum markup required for adding a dropdown menu to the hyperlink via data attributes.

The above example demonstrates the most basic form of the Bootstrap dropdowns. Let's understand each part of the Bootstrap dropdown component one by one.

Explanation of Code

The Bootstrap dropdown has basically two components — the dropdown trigger element which can be a hyperlink or button, and the dropdown menu itself.

• The .dropdown class specifies a dropdown menu.
• The .dropdown-toggle class defines the trigger element, which is a hyperlink in our case, whereas the attribute data-toggle="dropdown" is required on the trigger element to toggle the dropdown menu.
• The .caret element inside the trigger anchor element creates a small down triangle icon which indicates that the link contains a dropdown menu.
• The unordered list with the class .dropdown-menu is actually building the dropdown menu that typically contains the related links or actions.

The previous example code has one small problem. If you click the dropdown link it will add a # character to the URL while showing the dropdowns. If you want to keep your URLs intact use the data-target attribute instead of href="#", like this:

Similarly, you can add the dropdowns to the buttons and nav components. The following section will show you some common implementation of the Bootstrap dropdown.

---

Dropdowns within a Navbar

The following examples will show you how to add dropdowns to navbar.

— 上面示例的输出将如下所示：

---

Dropdowns within Navs

The following example will show you how to add dropdowns to pills navs.

— 上面示例的输出将如下所示：

You can simply convert the above example to a tab dropdown by replacing the class .nav-pills with the .nav-tabs, without any further change in markup.

---

Dropdowns within Buttons

The following examples will show you how to add dropdowns to buttons.

— 上面示例的输出将如下所示：

---

Bootstrap Split Button Dropdowns

The following examples will show you how to add dropdowns to split buttons.

— 上面示例的输出将如下所示：

---

Dropdowns Inside Button Groups

To create dropdown menus inside a button group just place a .btn-group along with the dropdown markup within another .btn-group.

— 上面示例的输出将如下所示：

Similarly, you can crate dropdown inside vertically stacked button groups, like this:

---

Creating the Dropup Menus

You can even trigger the dropdown menus above the elements by adding an extra class .dropup to the parent, as given in the example below.

— 上面示例的输出将如下所示：

---

Creating the Right Aligned Dropdown Menus

By default, the top-left corner of the dropdown menu is positioned at the bottom-left corner of its parent element i.e. 100% from the top and along the left side. To right align the dropdown menu just add an extra class .dropdown-menu-right to the .dropdown-menu base class.

---

Adding Headers to Dropdown Items

You can optionally add a menu header to label a section of menu items inside a dropdown menu by adding the class .dropdown-header to the list element.

---

Disable Items within a Dropdown

You can apply the class .disabled on a list element to make the menu item look like disabled. However, the link is still clickable, to disable this you can typically remove the anchor's href attribute either using the JavaScript or manually.

---

Adding Dropdowns via JavaScript

You may also add dropdowns manually using the JavaScript — just call the dropdown() Bootstrap method with the id or class selector of the link or button element in your JavaScript code.

---

Options

None

---

Methods

This is the standard bootstrap's dropdown method:

$().dropdown('toggle')

A programmatic api for toggling menus for a given navbar or tabbed navigation.

---

Events

These are the standard Bootstrap events to enhance the dropdown functionality. All dropdown events are fired at the .dropdown-menu's parent element.

The following example displays the text content of dropdown link when the users click on it.