Bootstrap4 Dropdown Menu
The Bootstrap 4 dropdown menu is a very common UI component used to display a series of clickable options or menu items.
Bootstrap4 dropdown menus are typically used in navigation bars, forms, or other interactive interfaces.
Basic Structure
The core of the Bootstrap 4 dropdown menu is the.dropdownclass, which can nest other elements (such as buttons, links, or text) to trigger the display of the menu. The menu items themselves are identified using the .dropdown-menu class, and specific options use the .dropdown-item class.
Bootstrap4 dropdown menus rely onpopper.min.js。
Style class description:
| Class name | Description | Example usage |
|---|---|---|
.dropdown | Container class for the dropdown menu, wrapping the button and menu. | <div class="dropdown">...</div> |
.dropdown-toggle | Used to create the button that triggers the dropdown menu, typically combined with the.btnclass. | <button class="btn btn-secondary dropdown-toggle">...</button> |
data-toggle="dropdown" | Makes the button or link trigger the show and hide of the dropdown menu. | <button data-toggle="dropdown">Dropdown button</button> |
.dropdown-menu | Container class for the dropdown menu, containing the menu items. | <div class="dropdown-menu">...</div> |
.dropdown-item | A menu item in the dropdown menu, usually a link. | <a class="dropdown-item" href="../index.html">Item</a> |
aria-haspopup="true" | Adds accessibility support, indicating that this element has a popup menu. | <button aria-haspopup="true">Dropdown</button> |
aria-expanded="false" | Adds accessibility support, indicating the current state of the menu (expanded or collapsed). | <button aria-expanded="false">Dropdown</button> |
The dropdown menu is toggleable, and is a context menu that displays links in a list format.
Example
Try it yourself »
Example Analysis
.dropdownThe class is used to specify a dropdown menu.
We can use a button or link to open the dropdown menu. The button or link needs to add the.dropdown-toggleanddata-toggle="dropdown"attribute.
<div>Add on the element.dropdown-menuclass to set up the dropdown menu, then add the.dropdown-itemclass to the options in the dropdown menu.
We can also use it in the<a>tag:
Example
Try it yourself »
Divider in Dropdown Menu
.dropdown-dividerThe class is used to create a horizontal divider in the dropdown menu:
Header in Dropdown Menu
.dropdown-headerThe class is used to add a header in the dropdown menu:
Active and Disabled Items in Dropdown Menu
The .active class will highlight the option in the dropdown menu (adding a blue background).
If you want to disable an option in the dropdown menu, you can use the.disabledclass.
Example
Try it yourself »
Dropdown Menu Positioning
If we want the dropdown menu to be right-aligned, we can add on the element the .dropdown-menu class and then the.dropdown-menu-rightclass.
Dropdown Menu Pop-up Direction Settings
The default pop-up direction of the dropdown menu is downward, but we can also set different directions.
Specify a Dropdown Menu That Pops to the Right
If you want the dropdown menu to pop to the right, you can add the"dropright"class to the div element:
Example
Try it yourself »
Specify a Dropup Menu That Pops Upward
If you want the dropup menu to pop upward, you can add the"dropup"class:
Example
Try it Yourself »
Specify a Dropdown Menu That Pops to the Left
If you want the dropdown menu to pop upward, you can add the"dropleft"class:
Example
Try it Yourself »
Dropdown Menu Text
.dropdown-item-textThe class can set text items in the dropdown menu:
Example
Try it Yourself »
Dropdown Menu in a Button
We can add a dropdown menu in a button:
Example
Try it Yourself »
Vertical button group with dropdown menu:
Example
Try it Yourself »