A great tool for keeping the interface structured and neat is the Bootstrap dropdown menu. With this feature, you can organize many groups of lists.
Bootstrap dropdowns are customizable and can be modified to suit any page. In this tutorial, we cover the topics of creating and modifying Bootstrap dropdown menus.
Contents
Bootstrap Dropdown: Main Tips
- Using Bootstrap 4, you can create dropdown menus.
- A dropdown is a toggleable menu, which allows you to place more options in a menu without cluttering the interface.
- Dropdowns can contain buttons, links or plain text.
Creating a Dropdown
<div class="dropdown">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
</div>
</div>Here is a list of steps, depicted in the code example above:
- Generating a basic dropdown requires you to create a button using
.btnand.dropdown-toggleclasses. - You should also add the
.data-toggleattribute with the.dropdownvalue. - Then, you need to create a
<div>container with the.dropdown-menuclass. Inside it there should be<a>elements - links with the.dropdown-itemclass. - This will create a basic dropdown menu.
Dropdown Elements
Divider
A dropdown divider is similar to the <hr /> element since it creates a thin horizontal line. However, this divider appears inside Bootstrap dropdown menus.
Quick Tip: dividers allow you to visually separate certain options from others.
<div class="dropdown">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Penguins</a>
<a href="#" class="dropdown-item">Ostriches</a>
</div>
</div>To create a dropdown divider, you need to create a <div> container with the .dropdown-divider class inside the dropdown menu container (between the links you'd like to separate).
Header
Dropdown headers can be added by creating a <div> container inside the .dropdown-menu container, and applying a .dropdown-header class to it. An example provided will show you how it's done:
<div class="dropdown">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">Others</div>
<a href="#" class="dropdown-item">Penguins</a>
<a href="#" class="dropdown-item">Ostriches</a>
</div>
</div>Active/Disabled Links
To make a link inside a dropdown menu appear active, you will need to apply the .active class. To disable one, .disabled class should be used. See the code example below and run it in the code editor to see the difference:
<div class="dropdown">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu">
<a href="#" class="active dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header">Others</div>
<a href="#" class="disabled dropdown-item">Penguins</a>
<a href="#" class="dropdown-item">Ostriches</a>
</div>
</div>Types Of Display
Bootstrap dropdown menus can also be styled by modifying where and how they appear. See the various types of display and choose whichever suits your website best.
Left/Right Dropdown
You can create a dropright or dropleft menu by adding the .dropright or .dropleft class to the dropdown element. Note that the caret/arrow is added automatically:
<div class="dropdown dropright">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
</div>
</div>Right Button Corner
It is possible to make the dropdown appear from the right corner of the button.
You can achive this by using the .dropdown-menu-right with the .dropdown-menu class on the <div> container that has the dropdown content inside. See the HTML document below to understand how it should look like in your code:
<div class="dropdown">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me and notice the position of the menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="active dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
</div>
</div>Above Button
You can make the dropdown menu appear above the button that toggles its visibility.
This usually proves useful when your buttons are at the end of the page. Achieve this by simply adding the .dropup class to the element with the .dropdown class. See the example below and try to run it in our code editor:
<div class="dropdown dropup" style="padding-top:200px">
<button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
Click on me
</button>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="active dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
</div>
</div>Side Of The Button
By using .dropdown-toggle-split class on the button that toggles the dropdown menu's visibility, you can also make it dropdown from the side of the button. This is what it would look like in your HTML document:
<div class="dropdown">
<div class="btn-group">
<button class="btn-success btn" type="button">Click on me</button>
<button class="btn-success btn dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="active dropdown-item">Cats</a>
<a href="#" class="dropdown-item">Dogs</a>
<a href="#" class="dropdown-item">Rabbits</a>
<a href="#" class="dropdown-item">Alpacas</a>
</div>
</div>Button Group Dropdowns
As we were covering Bootstrap button groups, we also explained how to use them to create dropdown menus. Let's see a simple example to refresh your memory - just so you are aware of all options:
<div class="btn-group">
<button type="button" class="btn btn-danger">Cats</button>
<button type="button" class="btn btn-danger">Dogs</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Other
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Penguins</a>
<a class="dropdown-item" href="#">Ostriches</a>
</div>
</div>
</div>You can apply dropdown menus to a vertical button group:
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Cats</button>
<button type="button" class="btn btn-danger">Dogs</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Other
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Penguins</a>
<a class="dropdown-item" href="#">Ostriches</a>
</div>
</div>
</div>Plain Text In A Dropdown
In some cases, you might need to add plain text (not a link or a button a user can select) into your Bootstrap dropdown menu. See the example below to get the idea:
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Click on me</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cats</a>
<a class="dropdown-item" href="#">Dogs</a>
<a class="dropdown-item-text" href="#">Link</a>
<span class="dropdown-item-text">Plain text</span>
</div>
</div>Bootstrap Dropdown: Summary
- Bootstrap 4 helps you create dropdown menus that display plain text, buttons or links.
- A dropdown menu is toggleable and allows you to provide the menu with more options.
- Using dropdown keeps the overall interface cleaner.