We have already touched upon the dropdown component in our previous tutorial on Bootstrap 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 5 dropdowns with examples. Remember to include bootstrap.bundled.min.js in order for the dropdown to work. You can refer the starter template here.
Bootstrap 5 Dropdowns Tutorial
- Basic features of dropdowns
- Creating default dropdown button
- Adding divider
- Disabling link in dropdown
- Dropdown with right menu alignment
- Dropdown button with header
- Sizing of dropdown button
- Split dropdown button
- Split dropup button
- Points to remember
1. Basics of Bootstrap 5 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 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.
2. Creating Default Dropdown Button
Below is the code for creating a default dropdown in Bootstrap 5:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" 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:
- 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:
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.
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:
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:
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.
The big and small dropdown buttons are shown below:
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:
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:
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 and 5 each menu items can be a link or button element.
Leave a Reply
Your email is safe with us.