Bootstrap Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:


<div class=”dropdown”>
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example
<span class=”caret”></span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>


Example Explained

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

Dropdown Divider

The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:


<li class=”divider”></li>


Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:


<li class=”dropdown-header”>Dropdown header 1</li>


Disable an Item

To disable an item in the dropdown menu, use the .disabled class:


<li class=”disabled”><a href=”#”>CSS</a></li>


Dropdown Position

To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:


<ul class=”dropdown-menu dropdown-menu-right”>



If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class=”dropdown” to "dropup":


<div class=”dropup”>


Dropdown Accessibility

To help improve accessibility for people using screen readers, you should include the following role and aria-*attributes, when creating a dropdown menu:


<div class=”dropdown”>
<button class=”btn btn-default dropdown-toggle” type=”button” id=”menu1″ data-toggle=”dropdown”>Tutorials
<span class=”caret”></span></button>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”menu1″>
<li role=”presentation”><a role=”menuitem” href=”#”>HTML</a></li>
<li role=”presentation”><a role=”menuitem” href=”#”>CSS</a></li>
<li role=”presentation”><a role=”menuitem” href=”#”>JavaScript</a></li>
<li role=”presentation” class=”divider”></li>
<li role=”presentation”><a role=”menuitem” href=”#”>About Us</a></li>


Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

Complete Bootstrap Dropdown Reference

For a complete reference of all dropdown options, methods and events, go to our Bootstrap JS Dropdown Reference.

Leave a Reply

Your email address will not be published. Required fields are marked *