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.

  • <div class="dropdown">
  •     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
  •     <ul class="dropdown-menu">
  •         <li><a href="#">Action</a></li>
  •         <li><a href="#">Another action</a></li>
  •     </ul>
  • </div>

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:

  • <div class="dropdown">
  •     <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
  •     <ul class="dropdown-menu">
  •         <li><a href="#">Action</a></li>
  •         <li><a href="#">Another action</a></li>
  •     </ul>   
  • </div>

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.

  • <div class="navbar navbar-static">
  •     <div class="navbar-inner">
  •         <a href="#" class="brand">Brand</a>
  •         <ul role="navigation" class="nav">
  •             <li><a href="#">Home</a></li>
  •             <li><a href="#">Profile</a></li>
  •             <li class="dropdown">
  •                 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
  •                 <ul class="dropdown-menu">
  •                     <li><a href="#">Inbox</a></li>
  •                     <li><a href="#">Drafts</a></li>
  •                     <li><a href="#">Sent Items</a></li>
  •                     <li class="divider"></li>
  •                     <li><a href="#">Trash</a></li>
  •                 </ul>
  •             </li>
  •         </ul>
  •         <ul class="nav pull-right">
  •             <li class="dropdown">
  •                 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
  •                 <ul class="dropdown-menu">
  •                     <li><a href="#">Action</a></li>
  •                     <li><a href="#">Another action</a></li>
  •                     <li class="divider"></li>
  •                     <li><a href="#">Settings</a></li>
  •                 </ul>
  •             </li>
  •         </ul>
  •     </div>
  • </div>

— The output of the above example will look something like this:

 

Tip:You can draw a divider line to separate the links inside a dropdown menu by adding the class .divider on a blank list element.


Dropdowns within Navs

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

  • <ul class="nav nav-pills">
  •     <li class="active"><a href="#">Home</a></li>
  •     <li><a href="#">Profile</a></li>
  •     <li class="dropdown">
  •         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Inbox</a></li>
  •             <li><a href="#">Drafts</a></li>
  •             <li><a href="#">Sent Items</a></li>
  •             <li class="divider"></li>
  •             <li><a href="#">Trash</a></li>
  •         </ul>
  •     </li>
  •     <li class="dropdown pull-right">
  •         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Action</a></li>
  •             <li><a href="#">Another action</a></li>
  •             <li class="divider"></li>
  •             <li><a href="#">Settings</a></li>
  •         </ul>
  •     </li>
  • </ul>

— The output of the above example will look something like this:

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.

  • <div class="btn-group">
  •     <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
  •     <ul class="dropdown-menu">
  •         <li><a href="#">Action</a></li>
  •         <li><a href="#">Another action</a></li>
  •         <li class="divider"></li>
  •         <li><a href="#">Separated link</a></li>
  •     </ul>
  • </div>

— The output of the above example will look something like this:


Bootstrap Split Button Dropdowns

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

  • <div class="btn-group">
  •     <button type="button" class="btn btn-default">Action</button>
  •     <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
  •     <ul class="dropdown-menu">
  •         <li><a href="#">Action</a></li>
  •         <li><a href="#">Another action</a></li>
  •         <li class="divider"></li>
  •         <li><a href="#">Separated link</a></li>
  •     </ul>
  • </div>

— The output of the above example will look something like this:

 

Tip:You can use the Bootstrap's button relative sizing classes like .btn-lg, .btn-sm and .btn-xs to further resizing the buttons dropdowns.


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.

  • <div class="btn-group">
  •     <button type="button" class="btn btn-primary">Button</button>
  •     <button type="button" class="btn btn-primary">Another Button</button>
  •     <div class="btn-group">
  •         <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Dropdown <span class="caret"></span></button>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Action</a></li>
  •             <li><a href="#">Another action</a></li>
  •             <li class="divider"></li>
  •             <li><a href="#">Separated link</a></li>
  •         </ul>
  •     </div>
  • </div>

— The output of the above example will look something like this:

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

  • <div class="btn-group-vertical">
  •     <button type="button" class="btn btn-primary">Button</button>
  •     <button type="button" class="btn btn-primary">Another Button</button>
  •     <div class="btn-group">
  •         <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Dropdown <span class="caret"></span></button>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Action</a></li>
  •             <li><a href="#">Another action</a></li>
  •             <li class="divider"></li>
  •             <li><a href="#">Separated link</a></li>
  •         </ul>
  •     </div>
  • </div>

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.

  • <div class="btn-group dropup">
  •     <button type="button" class="btn btn-primary">Button</button>
  •     <button type="button" class="btn btn-primary">Another Button</button>
  •     <div class="btn-group">
  •         <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Dropdown <span class="caret"></span></button>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Action</a></li>
  •             <li><a href="#">Another action</a></li>
  •             <li class="divider"></li>
  •             <li><a href="#">Separated link</a></li>
  •         </ul>
  •     </div>
  • </div>

— The output of the above example will look something like this:


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.

  • <div class="btn-group">
  •     <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Dropdown <span class="caret"></span></button>
  •     <ul class="dropdown-menu dropdown-menu-right">
  •         <li><a href="#">Action</a></li>
  •         <li><a href="#">Another action</a></li>
  •         <li class="divider"></li>
  •         <li><a href="#">Separated link</a></li>
  •     </ul>
  • </div>

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.

  • <div class="btn-group">
  •     <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Products <span class="caret"></span></button>
  •     <ul class="dropdown-menu">
  •         <li class="dropdown-header">ELECTRONICS</li>
  •         <li><a href="#">Mobiles</a></li>
  •         <li><a href="#">Tablets</a></li>
  •         <li><a href="#">Laptops</a></li>
  •         <li class="dropdown-header">FASHION</li>
  •         <li><a href="#">Clothing</a></li>
  •         <li><a href="#">Sunglasses</a></li>
  •     </ul>
  • </div>

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.

  • <div class="btn-group">
  •     <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Report <span class="caret"></span></button>
  •     <ul class="dropdown-menu">
  •         <li><a href="#">View</a></li>
  •         <li><a href="#">Download</a></li>
  •         <li class="disabled"><a href="#">Edit / Delete</a></li>
  •     </ul>
  • </div>

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.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".dropdown-toggle").dropdown();
  • });  
  • </script>
 

Note:The data-toggle="dropdown" is still required for the dropdown's trigger element regardless of whether you call the dropdown via JavaScript or data-api.


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.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".dropdown-toggle").dropdown('toggle');
  • });  
  • </script>

Events

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

Event Description
show.bs.dropdown This event fires immediately when the show instance method is called. You can use the event.relatedTarget to target the toggling anchor element.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user. It will wait for CSS transitions, to complete. You can use the event.relatedTarget to target the toggling anchor element.
hide.bs.dropdown This event is fired immediately when the hide instance method has been called. You can use the event.relatedTarget to target the toggling anchor element.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user. It will wait for CSS transitions, to complete. You can use the event.relatedTarget to target the toggling anchor element.

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

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".dropdown").on("show.bs.dropdown", function(e){
  •         var linkText = $(e.relatedTarget).text(); // Get the link text
  •         alert("Click on OK button to view the dropdown menu for - " + linkText);
  •     });
  • });
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.