7 customized Bootstrap dropdown demos in menus, navbar and tabs

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.

A 2:58 Minutes Video of dropdown Tutorial

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 at 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 Bootstrap dropdown. I will show you navbar, tabs, and other demos, however, this one is with a simple HTML button and link.

See it online:

Bootstrap dropdown button link

See online demo and code

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.

The Markup for link:

 

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).

Bootstrap dropdown navbar

See online demo and code

In the demo, you can see two dropdowns. One is at the center created with the following code:

 

 

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:

Bootstrap dropdown navbar custom

See 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:

 

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.

See a demo online:

Bootstrap dropdown button

See online demo and code

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:

Bootstrap dropdown tab

See online demo and code

The following code is  used to create a dropdown:

 

For tab’s content:

 

See the complete code in the demo page.

An example of split button dropdown

In 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.

See demo first:

Bootstrap dropdown split button

See online demo and code

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 left) the menu will be pulled by left button as well. For example:

 

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:

 

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

Bootstrap dropdown split button tab

See online demo and code

You can see the complete code in the demo page.

Note: In all above examples, I used data attribute to initiate the dropdown menu. You can use JavaScript as well.

For example:

 

This code will be placed in the <script> section.