The dropdown component of Bootstrap Framework
The Bootstrap framework has built-in dropdown component and JS plug-in that can be used in navbars menus, pills, buttons, and even tabs quite easily.
You can use a dropdown to show contextual links in the menu bar or other parts of the website.
I will show you demos of using Bootstrap dropdown in different areas with default and custom color schemes. You can see/take the code and test it on your machine or experience demos online.
A simple example of using dropdown classes with HTML elements
Let me start with the basic HTML elements to show you how easy and flexible it is to create a Bootstrap dropdown. I will show you navbar, tabs, and other demos, however, this one is with a simple HTML button and link.
As you are already working on Bootstrap framework, so I am assuming you have included Bootstrap CSS and JS libraries in the <head> section. Otherwise, you simply need the dropdown.js component to be included (if you do not want complete JS library).
In the example, I simply used HTML button and anchor tag without any classes to create a dropdown menu. It is a series of <li> and <ul> tags to create menu items with divider classes.
The main <li> is given the required .dropdown class. The <ul> inside the <a> and <button> tags is given the dropdown-menu class, that are built-in classes in Framework.
Example code
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h3>Bootstrap dropdown in a Link</h3> <ul> <li class="dropdown" style="list-style: none;"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials and Tips <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/php-tutorials/">PHP</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li> </ul> </li> </ul> <h3>Bootstrap dropdown in a Button</h3> <ul> <li class="dropdown" style="list-style: none;"> <button class="dropdown dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></button> <ul class="dropdown-menu"> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/php-tutorials/">PHP</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li> </ul> </li> </ul> </div> </body> </html>
An example to use dropdown in navbar menu with default colors
In the following example, the dropdown Bootstrap component is used in the navbar. I have used the default color scheme for both navbar and dropdown (see next example for a different color scheme).
Online demo and code
In the demo, you can see two dropdowns. One is at the center created with the following code:
<!-- First dropdown menu here--> <li class="dropdown"> <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://www.jquery-az.com/bootstrap-carousel-5-single-multiple-horizontal-and-vertical-sliding-demos/">Carousel</a></li> <li><a href="https://www.jquery-az.com/bootstrap-form-customized-styles-6-online-examples/">Forms</a></li> <li role="separator" class="divider"></li> <li><a href="https://www.jquery-az.com/bootstrap-select-5-beautiful-styles/">Select</a></li> </ul> </li> <!-- Dropdown ending here-->
While the second is at the right corner of the navbar. The complete code is given in the demo page.
A navbar with custom color dropdown
In the following example, I will override the default CSS classes for navbar and dropdown inside the navbar to give it a custom look. Generally, this is required to match the design of your web page with the menu bars. Have a look at the demo online with description below:
Online demo and code
In the <head> section of code, you can see <style> with different classes. The .navbar-default is the default class name that specifies the color scheme of the navbar. This is a built-in class in Bootstrap CSS. By using navbar-default and its sub-classes for the navbar, you can change the color scheme or other properties of the navigation menu.
The <style> section contains many classes related to navbar, however, the classes dealing with dropdown menu are:
.navbar-default .navbar-nav > li > .dropdown-menu { background-color: #69899f; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: #d7e2e9; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: #e5dbdb; background-color: #425766;
You can change the text color, background properties, add radius etc. by using these classes.
A demo of dropdown in a Bootstrap button
This time, the button is contained in a <div> tag rather <ul>. A Bootstrap button is created with btn btn-danger class along with dropdown related attributes. If you are initiating a dropdown by data attribute, then use data-toggle=”dropdown” in button tag.
Code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .dropdown-menu{ background: -webkit-gradient(linear, left top, left 25, from(#E17D7B), color-stop(4%, #390E0D), to(#E17D7B)); background: -moz-linear-gradient(top, #E17D7B, #390E0D 1px, #E17D7B 25px); color:white; } .dropdown-menu li>a{ color:#fff; } .dropdown-menu>li{ background:#D9534F; border-bottom:1px solid #791C1A; border-left:2px solid #791C1A; border-right:2px solid #791C1A; } .dropdown-menu li>a:hover{ background:#D9534F; } .dropdown-menu > li > .divider { background-color: #D9534F; border:10px solid #791C1A; } </style> </head> <body> <div class="container"> <h3>Bootstrap dropdown in a Button</h3> <div class="dropdown"> <button id="dLabel" type="button" class="btn btn-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tutorials and Tips <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/php-tutorials/">PHP</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li> <li class="divider"></li> <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li> </ul> </div> </div> </body> </html>
Output:
Along with noticing a button tag that uses data attributes:
<button id=”dLabel” type=”button” class=”btn btn-danger” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
You can see, dropdown-menu class is used in the <head> section to change the default color scheme of the dropdown menu. Feel free to change this with CSS or CSS 3 properties, as per the need of your web design.
An example of dropdown with Bootstrap tabs
Similarly, you can use the dropdown with Bootstrap tabs. For that, I have simply used <li> and assigned it .dropdown class. Just like other tabs, use data attribute data-toggle=”tab” in list items of dropdown and in the tab’s content area use the tab-pane class with the same id as list items are created.
See a demo online:
Online demo and code
The following code is used to create a dropdown:
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#jquery" role="tab" data-toggle="tab">jQuery</a></li> <li><a href="#boots" role="tab" data-toggle="tab">Bootstrap</a></li> <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li> </ul> </li>
For tab’s content:
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#jquery" role="tab" data-toggle="tab">jQuery</a></li> <li><a href="#boots" role="tab" data-toggle="tab">Bootstrap</a></li> <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li> </ul> </li>
See the complete code on the demo page.
An example of split button dropdown
In the above example of button dropdown, only the single button was used to act as a dropdown contextual menu. By using two buttons and using data attributes, you can create a split dropdown button as well.
BS Code:
<!DOCTYPE html> <html> <head> <title>Bootstrap Button demo</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .dropdown-menu{ background-color: #A8DEEE; border: 1px solid #428BCA; } .divider{ border: 1px dashed #428BCA; } </style> </head> <body> <div class="container"> <h1>A Split button dropdown demo</h1> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-info">Split Dropdown Menu</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only"></span> </button> <ul class="dropdown-menu"> <li><a href="https://www.jquery-az.com/">Home</a></li> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/jquery-ui/">jQuery UI</a></li> <li role="separator" class="divider"></li> <li><a href="https://www.jquery-az.com/php-tutorials/">PHP</a></li> </ul> </div> </div> </body> </html>
In the demo, the button is pulled down by clicking the right split button only. If you use the data attribute data-toggle=”dropdown” in the first button (towards the left) the menu will be pulled by the left button as well. For example:
<button type="button" class="btn btn-info" data-toggle="dropdown">Split Dropdown Menu</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only"></span> </button>
In that case, the dropdown will be pulled for both buttons. The <style> tag contains the CSS for dropdown and divider class:
The <style> tag contains the CSS for dropdown and divider class:
.dropdown-menu{ background-color: #A8DEEE; border: 1px solid #428BCA; } .divider{ border: 1px dashed #428BCA; }
You can use single or split button dropdown in navbar or tabs as well. Following example shows a split dropdown in Tabs.
Tabs with split dropdown demo
The following example is just like the above tab example with dropdown, except I have used a button rather a link this time. The dropdown is a split button. See demo online
Complete code:
<!DOCTYPE html> <html> <head> <title>navbar example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <style> .dropdown-menu{ background-color: #A8DEEE; border: 1px solid #428BCA; } .divider{ border: 1px dashed #428BCA; } </style> </head> <body> <div class="container"> <h1>A Bootstrap Tab with split button dropdown example</h1> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li><a href="#java" role="tab" data-toggle="tab">Java</a></li> <li><a href="#csharp" role="tab" data-toggle="tab">C#</a></li> <li><a href="#mysql" role="tab" data-toggle="tab">MySQL</a></li> <li class="dropdown"> <div class="btn-group"> <button class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Web</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only"></span> </button> <ul class="dropdown-menu"> <li><a href="#jquery" role="tab" data-toggle="tab">jQuery</a></li> <li><a href="#boots" role="tab" data-toggle="tab">Bootstrap</a></li> <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li> </ul> </div> </li> </ul> </li> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home">Content for home page here</div> <div class="tab-pane" id="java">Java is a programming language!</div> <div class="tab-pane" id="csharp">C# is also a programming language</div> <div class="tab-pane" id="mysql">MySQL is a databased mostly used for web applications.</div> <div class="tab-pane" id="jquery">jQuery content here </div> <div class="tab-pane" id="boots">Bootstrap Content here</div> <div class="tab-pane" id="html">Hypertext Markup Language</div> </div> </body> </html>
Note: In all the above examples, I used data attribute to initiate the dropdown menu. You can use JavaScript as well.
For example:
$('.dropdown-toggle').dropdown()
This code will be placed in the <script> section.