Bootstrap Tutorial - Bootstrap Dropdowns








The markup for creating a dropdown is as follows:

Every dropdown should have two important elements: an a element and a ul element.

The ul element is hidden by default and the a element is used to toggle the dropdown menu.

The a element has two necessary data-* attributes: data-toggle and data-target.

The data-toggle attribute tells Bootstrap to activate the dropdown effect on the link element whenever clicked.

The data-target attribute is used to prevent the page redirection when a link is clicked.

It's unnecessary to provide an href attribute here, as it will be ignored. This link element should contain some anchor text, such as "Dropdown" , and a down arrow icon, which is produced using a class of caret.

Once the link and icons are placed properly, you can then create a ul list for representing the list of links in the dropdown menu.

This ul element should have the class

dropdown-menu

.





Example

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head><!--from   w w w  . j  a  va 2  s.  c  o  m-->
  <body style='margin:30px'>
    <div class="dropdown">
        <a data-toggle="dropdown" 
           data-target="#" href="http://www.java2s.com">Dropdown <span  class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
            <li><a  href="#">Link 4</a></li>
        </ul>
    </div>
  </body>
</html>

Click to view the demo

There are two different ways of using Bootstrap's JavaScript plugins.

The first method requires no JavaScript at all. You just have to follow some recommended HTML markup to use them.

The other method needs some JavaScript knowledge for initializing and customizing the plugins.





The dropdown plugin from Bootstrap can also be used using JavaScript.

To trigger the dropdown plugin through jQuery, you need to use the method dropdown():

$().dropdown('toggle'); 
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from  ww w  .  j a v  a  2  s  . c  om-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <div class="dropdown" id="myDropdown">
        <a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="#">
            Dropdown <span  class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
            <li><a  href="#">Link 4</a></li>
        </ul>
    </div>
  </body>
</html>

Click to view the demo

The following examples shows how to add dropdowns to navbar.

<!--  w  w w  .  j  a  va2 s  .c  om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-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 navbar-nav navbar-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><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>
</body>
</html>

Click to view the demo

The following example shows how to add dropdowns to pills navs.

We can convert the code to a tab dropdown by replacing the class .nav-pills with the .nav-tabs.

<!--from   w  w w.j a  v a 2 s .  c  o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
    hr{
        margin: 60px 0;
    }
</style>
</head>
<body>
<div class="bs-example">
    <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>
    <hr>
    <ul class="nav nav-tabs">
        <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>
</div>
</body>
</html>

Click to view the demo

The following examples shows how to add dropdowns to buttons.

<!--   ww  w.  ja  va2s  . c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <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="#">Third Link</a></li>
            </ul>
        </div>
        <!--Primary buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-primary 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="#">Third Link</a></li>
            </ul>
        </div>
        <!--Info buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-info 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="#">Third Link</a></li>
            </ul>
        </div>
        <!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-success 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="#">Third Link</a></li>
            </ul>
        </div>
        <!--Warning buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-warning 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="#">Third Link</a></li>
            </ul>
        </div>
        <!--Danger buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-danger 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="#">Third Link</a></li>
            </ul>
        </div>
    </form>
</div>
</body>
</html>

Click to view the demo

Split Button Dropdowns

The following examples shows how to add dropdowns to split buttons.

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

<!--  w  w w.java 2s.com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .btn-toolbar{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="btn-toolbar">
    <!--Default buttons with dropdown menu-->
    <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="#">Third Link</a></li>
        </ul>
    </div>
    <!--Primary buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Action</button>
        <button type="button" data-toggle="dropdown" class="btn btn-primary 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="#">Third Link</a></li>
        </ul>
    </div>
    <!--Info buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" data-toggle="dropdown" class="btn btn-info 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="#">Third Link</a></li>
        </ul>
    </div>
    <!--Success buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" data-toggle="dropdown" class="btn btn-success 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="#">Third Link</a></li>
        </ul>
    </div>
    <!--Warning buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" data-toggle="dropdown" class="btn btn-warning 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="#">Third Link</a></li>
        </ul>
    </div>
    <!--Danger buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" data-toggle="dropdown" class="btn btn-danger 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="#">Third Link</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Click to view the demo

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

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{<!--from w ww.  ja v  a  2 s  .c o m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <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="#">Third Link</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Add dropdown inside vertically stacked button groups.

<!--   w  w w. j a  va  2s  .c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <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="#">Third Link</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Creating the Dropup Menus

We can trigger the dropdown menus above the elements by adding an extra class .dropup to the parent.

<!--from  ww w  .j  a v a  2  s .  c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <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="#">Third Link</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Adding Dropdowns via Data Attributes

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

The following example shows the basic markup required for adding a dropdown menu to a link or buttons via data attributes.

<!--from w w  w .j av a 2 s  .c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
   <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>
            <li class="divider"></li>
            <li><a href="#">Third Link</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Click to view the demo

Adding Dropdowns via JavaScript

We can add dropdowns manually using the JavaScript as the follows.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from   w  w w. j a v a  2s  .co m-->
  $(".dropdown-toggle").dropdown();
});  
</script>
<style type="text/css">
  .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
   <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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="#">Third Link</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Click to view the demo