Dropdown menus in Bootstrap 5 are a cool feature you shouldnt miss. Heres how to use dropdown menus in Bootstrap 5.
Dropdown menus in Bootstrap 5 are a cool feature you shouldn't miss. Here's how to use dropdown menus in Bootstrap 5 .
Create a basic dropdown menu.
A dropdown menu is a toggleable menu that allows the user to select a value from a predefined list. Essentially, it would look like this:
Detailed explanation:
This class .dropdownrepresents a dropdown menu.
To open this menu, use a button or link containing the class .dropdown-toggleand attribute data-bs-toggle="dropdown".
Add a class .dropdown-menuto the element to create a real dropdown menu. Then add the class .dropdown-itemto each element (link or button) inside the dropdown menu.
For example:
Bootstrap Example Dropdown menu
Split dropdown menu
The `.dropdown-divider` class is used to separate the links within a dropdown menu with a thin horizontal border:
For example:
Bootstrap Example Split dropdown menu
Dropdown menu header
This class .dropdown-headeris used to add headers inside the dropdown menu:
-
Dropdown header 1
For example:
Bootstrap Example Dropdown menu
Disabled and enabled items
Highlight a specific dropdown item using a class .active(add a blue background color).
To disable an item in a dropdown menu, use the class .disabled(which has light gray text and no mouse cursor effect):
- Normal
- Active
- Disabled
For example:
Bootstrap Example The dropdown menu has disabled items highlighted in light gray.
Drop-off location
You can also create a "dropend" (drop-down on the right) or "dropstart" (drop-down on the left) menu by adding the class .dropend or .dropstart to the dropdown element. Note that the caret/arrow is added automatically.
Drop it to the right:
Drop it to the left:
For example:
Menu dropend:
Bootstrap Example Menu drop-down menu
Add .dropend next to the dropdown menu to right-align it. Carets and arrows are added automatically;
Dropstart menu:
Bootstrap Example Dropstart menu
Add .dropstart next to the dropdown menu to align it to the left.
To the right of the dropdown menu
To align the dropdown menu to the right, add the .dropdown-menu-endfollowing class to this element .dropdown-menu:
For example:
Bootstrap Example The dropdown menu is on the right.
Dropup
If you want the dropdown menu to expand upwards instead of dropping down, change the element with class='dropdown' to 'dropup' : :
For example:
Bootstrap Example Dropdown menu
The `.dropup` class makes the dropdown menu expand upwards instead of downwards:
Note that there must be space for the expandable dropup menu.
Text dropdown
The class .dropdown-item-textis used to add plain text to a dropdown menu or to use links for the default link style:
For example:
Bootstrap Example The dropdown menu contains text or a link.
Group buttons with dropdown menus
The basic code is as follows:
For example:
Bootstrap Example Nested button groups to create a dropdown menu.
Vertical button layout with dropdown menu
Basic code:
For example:
Bootstrap Example Group the buttons vertically with the dropdown menu.
Above is how to create a dropdown menu using Bootstrap 5. As you can see, it's not too difficult if you take the time to learn a little. Good luck!