Bootstrap 4 Dropdowns Tutorial

We have already touched upon the dropdown component in our previous tutorial on Bootstrap 4 buttons. Dropdown is nothing but a button (or a link) and show a list when click on it. In this tutorial let us explore different types of Bootstrap 4 dropdowns with examples. Remember to include jQuery and bootstrap.min.js in order for the dropdown to work. You can refer the starter template here.

Bootstrap 4 Dropdowns Tutorial

  1. Basic features of dropdowns
  2. Creating default dropdown button
  3. Adding divider
  4. Disabling link in dropdown
  5. Dropdown with right menu alignment
  6. Dropdown button with header
  7. Sizing of dropdown button
  8. Split dropdown button
  9. Split dropup button
  10. Points to remember

1. Basics of Bootstrap 4 Dropdowns

  • Dropdowns are toggleable list of links or button elements shown in up or down direction.
  • This is generally used for dropdown or drop up menu items and sidebar navigation items.
  • It works based on the Popper.js script.
  • You should include jQuery, popper.min.js and then bootstrap.min.js in the same sequence. Use all the examples in this tutorial along with our starter template.
  • There will be no “role” or “aria-” attributes added to dropdown element by default. You should manually insert wherever required.
  • The dropdown items can be closed either by clicking the button or clicking outside. You can also use “Esc” key to close the dropdown items.
Related:  10 Tips to Use Mouse More Productively

Offer: Get 92% discount of Mobirise Bootstrap site builder.

2. Creating Default Dropdown Button

Below is the code for creating a default dropdown in Bootstrap 4:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

It will produce the following result on the browser:

Bootstrap 4 Dropdown

  • Basically you need to wrap the content inside a div using “.dropdown” class. This will identify the button as a dropdown button. You can also use <a> tag instead of button.
  • The button (or link) is to be included with “.dropdown-toggle” class. In this example, we have used “btn-primary” class to create the button with primary color. You can use any of the color utility class to have different color button.
  • After the button create a dropdown menu with items.

3. Adding Dividers in Dropdown

Now you know how to create the basic dropdown button. Let us add some decorative stuffs like adding divider between the menu items and the header.

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h6 class="dropdown-header">Dropdown Header</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

The dropdown menu will look like below:

Dropdown Component with Divider and Header

4. Disabling Link in Dropdown Item

You can disable the item in dropdown to prevent clicking:

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Dropdown Three</a>
</div>
</div>

We have used info button and disabled the third link. Moving mouse over the disabled link will show the stop cursor symbol and you can’t click on it.

Related:  How to Add and Customize Buttons in Weebly Site?

Dropdown Button with Divider and Disabled

5. Dropdown with Right Menu Alignment

As you have noticed in the above examples, the menu by default will be shown with the left alignment. You can change it to right alignment by adding “.dropdown-menu-right” class along with “.dropdown-menu” class. Remember, this will move the complete menu box to the right of the container. You should use additional CSS styles to position the menu under the dropdown button element properly.

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button Alignment Right
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

The right aligned menu items will look like below:

Dropdown Button Menu Right Alignment

6. Dropdown Button with Header

You can also add a header text inside the menu items using “.dropdown-header” class with any of the H1 – H6 tags. Generally the header is added on top the menu and is not clickable.

<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h5 class="dropdown-header" href="#">Dropdown Header</h5>
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
</div>
</div>

Dropdown with header will produce the following result:

Dropdown Button with Header

7. Dropdown Button Sizing

Make the dropdown button big or small using using “.btn-lg” and “.btn-sm” classes like below:

<div class="btn-group">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

Note, we have used two button groups to show two buttons inline, if you want to show only one button (say large) then you can use default “.dropdown” class.

Related:  How to Cloak Affiliate Links in WordPress?

The big and small dropdown buttons are shown below:

Dropdown Button Sizing

Offer: Get 92% discount of Mobirise Bootstrap site builder.

8. Split Dropdown Button

As of now we have seen different types of dropdown as a single button. The split button has two buttons part of it, hence you should use button group to show them inline without gap. Spliting of two buttons is enabled using the css clas “.dropdown-toggle-split”.

<div class="btn-group">
<button type="button" class="btn btn-secondary">Split Button</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

Split dropdown button will look like below:

Split Dropdown Button

9. Split Dropup Button

This is simply a dropup style instead of the default dropdown using “.dropup” class.

<div class="btn-group dropup">
<button type="button" class="btn btn-warning">Split Dropup Button</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

The dropup split button will look like below:

Split Dropup Button

10. Important Points to Remember

The dropdown menu will be automatically shown down or up depending on the browser’s viewport. For example, when you are at the end of the page the dropdown menu items will be shown above like drop up menu.

The button element in the dropdown supports all background color utility classes similar to default button component. Bootstrap 3 only supports links for menu items. But in Bootstrap 4 each menu items can be a link or button element.

Recommended Articles:

Leave a Comment