Bootstrap Dropdown

The Bootstrap dropdown menu is the easiest way of creating a toggleable menu with just the addition of few classes. Here is the simple example of a dropdown menu using Bootstrap.

Test it Live

Output

To create a dropdown menu in HTML, you have to write a javascript code to display a toggleable menu with links.

However, Bootstrap resolves this problem of writing javascript code and needs only to include Bootstrap minified CSS and javascript files to your project.

Let’s find out live examples with description to create a toggleable menu in Bootstrap.

Creating Bootstrap Dropdown Menus

To create a dropdown menu in Bootstrap, you have to use the below example:-

Test it Live

Output

Explanation of the Above Example

The Bootstrap .dropdown class in the <div> defines the dropdown menu.

The toggleable dropdown button uses the Bootstrap .dropdown-toggle class and the data-toggle="dropdown" attribute to open the dropdown menu.

In the toggle button, an <span> element with the class .caret is added to indicated the dropdown button using the caret icon().

The <ul> element contains the list of items using the Bootstrap .dropdown-menu class to display dropdown with links.

Dropup Menus in Bootstrap

If you want to create an upward menu or dropup menu, you have to use the Bootstrap .dropup class in the <div> element.

See the example given below for the dropup menu items.

Test it Live

Output

Click the above given button, you will get an upward menu items with links. The class .caret shows the upward direction caret icon().

Right Align Bootstrap Dropdown Menu

To align the dropdown menu to the right side, you have to use the Bootstrap class .dropdown-menu-right to the <ul> element.

See the example given below for the right aligned dropdown menu list items.

Test it Live

Output

Click the above button and you will get a right aligned dropdown menu with the list items.

Add Headers to Bootstrap Dropdown Menu Lists

If you want to add the list items with the header, you have to use the class .dropdown-header with the top <li> element that you want to make as a header.

Below is the example of the list items in which the first item is the header.

Test it Live

Output

Dropdown Divider in Bootstrap

If you want to display a separate link from the other list items in a dropdown menu, you have to use the class .divider to make a divider for separate list item.

It will create a line above the mentioned class list item or separate list item.

Test it Live

Output

Disable and Active Dropdown Menu items in Bootstrap

Using bootstrap you can easily make a dropdown menu list item disable or active. To disable a list item, you can use class .disabled. Similarly, to make list item active, you can use class .active.

The disable menu item shows a not allowed to click menu item when you hover over the item. However, the active list item displays with primary background color without hovering over the item.

Test it Live

Output