BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

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="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
    </div>
</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 <div> element with the class .dropdown-menu is actually building the dropdown menu that typically contains the related links or actions.

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.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Profile</a>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Inbox</a>
                    <a href="#" class="dropdown-item">Drafts</a>
                    <a href="#" class="dropdown-item">Sent Items</a>
                    <div class="dropdown-divider"></div>
                    <a href="#"class="dropdown-item">Trash</a>
                </div>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item">Reports</a>
                    <a href="#" class="dropdown-item">Settings</a>
                    <div class="dropdown-divider"></div>
                    <a href="#"class="dropdown-item">Logout</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

— 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 .dropdown-divider on a blank <div> element.


Dropdowns within Navs

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

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Drafts</a>
            <a href="#" class="dropdown-item">Sent Items</a>
            <div class="dropdown-divider"></div>
            <a href="#"class="dropdown-item">Trash</a>
        </div>
    </li>
    <li class="nav-item dropdown ml-auto">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
        <div class="dropdown-menu dropdown-menu-right">
            <a href="#" class="dropdown-item">Reports</a>
            <a href="#" class="dropdown-item">Settings</a>
            <div class="dropdown-divider"></div>
            <a href="#"class="dropdown-item">Logout</a>
        </div>
    </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 a primary button.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

— Similarly you can add dropdowns to other variants of the buttons, as shown here:


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-primary">Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

— Similarly you can add dropdowns to other variants of the buttons, as shown here:

Tip: You can use the Bootstrap's button relative sizing classes like .btn-lg and .btn-sm on the .btn element 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" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </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" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>

Creating Dropup, Dropleft and Dropright Menus

You can even trigger the dropdown menus above, as well as, at the left and right of the elements by adding an extra class .dropup, .dropleft and .dropright, respectively to the parent element (i.e. the .btn-group element), as shown in the following example.

<!-- Dropup menu -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropup</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

<!-- Dropleft menu -->
<div class="btn-group dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropleft</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

<!-- Dropright menu -->
<div class="btn-group dropright">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropright</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </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" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Right-aligned Dropdown Menu</button>
    <div class="dropdown-menu dropdown-menu-right">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

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


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 <div> element, like this:

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Products</button>
    <div class="dropdown-menu">
        <div class="dropdown-header">ELECTRONICS</div>
        <a href="#" class="dropdown-item">Mobiles</a>
        <a href="#" class="dropdown-item">Tablets</a>
        <a href="#" class="dropdown-item">Laptops</a>
        <div class="dropdown-header">FASHION</div>
        <a href="#" class="dropdown-item">Clothing</a>
        <a href="#" class="dropdown-item">Sunglasses</a>
    </div>
</div>

Disable Items within a Dropdown

You can apply the class .disabled to the menu items in the dropdown to make them 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" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Reports</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">View</a>
        <a href="#" class="dropdown-item">Download</a>
        <a href="#" class="dropdown-item disabled" tabindex="-1">Edit / Delete</a>
    </div>
</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>
$(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

There are certain options which can be passed to dropdown() Bootstrap method to customize the functionality of a dropdown. Options can be passed via data attributes or JavaScript.

For setting the dropdown options via data attributes, just append the option name to data-, like data-offset="10", data-display="static", and so on.

Name        
Type            
Default Value Description
offset number | string | function 0 Specify the offset of the dropdown relative to its target.
You can specify offset in various units, like px, %, vw, vh, etc. Unit-less values interpreted as pixels.
flip boolean true Allow Dropdown to flip in case of an overlapping on the reference element.
boundary string | element 'scrollParent' Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only).
reference string | element 'toggle' Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference.
display string 'dynamic' Specify the dynamic positioning for dropdowns. You can disable this with the value 'static'

See the Popper.js's documentation for more information on options mentioned above.

Note: When the boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.


Methods

This is the standard bootstrap's dropdown method:

$().dropdown('toggle')

This method toggles the dropdown menu of a given navbar or tabbed navigation.

<script>
$(document).ready(function(){
    $("#myDropdown").dropdown('toggle');
});  
</script>

$().dropdown('show')

This method shows the dropdown menu of a given navbar or tabbed navigation.

<script>
$(document).ready(function(){
    $("#myDropdown").dropdown('show');
});  
</script>

$().dropdown('hide')

This method hides the dropdown menu of a given navbar or tabbed navigation.

<script>
$(document).ready(function(){
    $("#myDropdown").dropdown('hide');
});  
</script>

$().dropdown('update')

This method updates the position of an element's dropdown.

<script>
$(document).ready(function(){
    $("#myDropdown").dropdown('update');
});  
</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>
$(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>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.