Bootstrap Dropdowns (Dropdown Menus)

Generally, the dropdown is a toggleable contextual overlay to display the list of items, links, etc., and it will allow users to choose one value from the list of items. To make the dropdowns more interactive, bootstrap has provided a dropdown JavaScript plugin.

In bootstrap, the dropdowns are built on a third-party library popper.js to provide dynamic positioning and viewport detection. The bootstrap dropdowns are more generic, and it will allow us to create a dropdown menu with any of the elements such as links, input controls, search fields, etc., based on our requirements.

Bootstrap Create Dropdown

Using the bootstrap dropdown plugin, we can convert HTML elements such as buttons and links as dropdown menus with some markup changes.

For dropdown creation first, you need to create a dropdown toggle element, i.e., either button (<button>) or link (<a>) by adding .dropdown-toggle class and data-toggle="dropdown" attribute to open the dropdown menu items like as shown below.

After creating the dropdown toggle element, now you need to build a dropdown menu, for that create <div> element with .dropdown-menu class and add dropdown menu items with .dropdown-item class like as shown below.

To make a complete dropdown, you need to wrap both dropdown toggle element (<button>) and dropdown menu items within the <div> element by adding .dropdown class like as shown below.

The above example will return the result as shown below.

Bootstrap Dropdown with HyperLink

In the above example, we used button (<button>) element as a toggle element to show the dropdown menu list items. If required, we can also use hyperlink (<a>) as dropdown toggle element like as shown below.

The above example will return the result as shown below.

Bootstrap Button Groups with Dropdown

To create a dropdown with button groups, you need to create a <div> element with .btn-group class and place dropdown markup within another .btn-group class like as shown below.

The above example will return the result as shown below.

Bootstrap Multiple Buttons with Dropdowns

If you observe the above examples, we created a dropdown menu with only one single button (<button>) or link (<a>) with primary (.btn-primary) class. Similarly, if required, we can also use other variants of buttons to create dropdowns, as shown below.

In the above example, we added a single button dropdown. Similarly, you can add multiple button dropdowns, and that will return the result as shown below.

Bootstrap Dropdown Menu Alignment

By default, the dropdown menu is automatically positioned to the left side of its parent. In case if you want to change the dropdown menu alignment to the right, you need to add .dropdown-menu-right to <div> element along with .dropdown-menu class like as shown below.

If you observe the above code, we added .dropdown-menu-right to <div> element along with .dropdown-menu class.

The above example will return the result as shown below.

Bootstrap Dropdown Menu Directions

By default, the bootstrap dropdown menu will appear below the element. In case, if you want to trigger the dropdown menu above the element or left / right of the element that you can achieve by adding .droptop, .dropright, and .dropleft classes to the parent element like as shown below.

The above example will return the result as shown below.

Bootstrap Dropdown Menu with Headers

In bootstrap, you can add header titles inside dropdown menus to provide more information about the action links. To do this, add the .dropdown-header class inside a list item in the unordered list of the dropdown menu like as shown below.

If you observe the above code, we created two header titles (Databases, Programming) by adding .dropdown-header class to <div> elements.

The above example will return the result as shown below.

Bootstrap Dropdown Menu with Dividers

In bootstrap, by using .dropdown-divider class, you can insert a horizontal line/divider between menu items of the dropdown to separate the group of related menu items like as shown below.

The above example will return the result as shown below.

Bootstrap Dropdown Menu with Active / Disable Items

In bootstrap, by adding .active and .disabled classes to the dropdown menu items, we can style them as active or disabled based on our requirements like as shown below.

The above example will return the result as shown below.

Bootstrap Split Button Dropdowns

In bootstrap, the split button dropdowns creation is same as single button dropdowns, but the only difference is we need to add an extra button element with .dropdown-toggle-split class to the toggle element for proper spacing around the dropdown.

In the above example, we added a single split button dropdown. Similarly, you can add multiple split button dropdowns, which will return the result as shown below.

This is how we can create the dropdowns using buttons or hyperlinks, etc., using different bootstrap classes based on our requirements.