YouTip...
` |
| `.dropdown-toggle` | Used to create a button that triggers the dropdown menu, often used in conjunction with the `.btn` class. | `` |
| `data-toggle="dropdown"` | Makes a button or link trigger the display and hiding of the dropdown menu. | `` |
| `.dropdown-menu` | The container class for the dropdown menu, containing the menu items. | `` |
| `.dropdown-item` | A menu item within the dropdown menu, typically a link. | `Item` |
| `aria-haspopup="true"` | Adds accessibility support, indicating that the element has a popup menu. | `` |
| `aria-expanded="false"` | Adds accessibility support, indicating the current state of the menu (expanded or collapsed). | `` |
Dropdowns are toggleable, contextual menus for displaying lists of links in a list format.
## Example
[Try it »](#)
### Example Explanation
The `.dropdown` 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 have the `.dropdown-toggle` and `data-toggle="dropdown"` attributes added.
Add the `.dropdown-menu` class to the `
` element to set up the dropdown menu, then add the `.dropdown-item` class to the options within the dropdown menu.
We can also use it within an `` tag:
## Example
[Try it »](#)
* * *
## Dividers in Dropdowns
The `.dropdown-divider` class is used to create a horizontal divider in the dropdown menu:
## Example
[Try it »](#)
* * *
## Headers in Dropdowns
The `.dropdown-header` class is used to add a header in the dropdown menu:
## Example
Dropdown header 1
[Try it »](#)
* * *
## Active and Disabled Items in Dropdowns
The `.active` class will highlight a dropdown menu item (adds a blue background).
To disable a dropdown menu item, you can use the `.disabled` class.
## Example
ActiveDisabled
[Try it »](#)
* * *
## Dropdown Menu Alignment
If we want the dropdown menu to be right-aligned, we can add the `.dropdown-menu-right` class after the `.dropdown-menu` class on the element.
## Example