YouTip

element to set the actual dropdown menu, then add the .dropdown-item class to the dropdown menu options. * * * ## Dividers in Dropdown Menu The .dropdown-divider class is used to create a horizontal divider in a dropdown menu: ## Example

---

[Try it »](#) * * * ## Headers in Dropdown Menu The .dropdown-header class is used to add headers in a dropdown menu: ## Example

Header 1

[Try it »](#) * * * ## Active and Disabled Items in Dropdown Menu The .active class will highlight the dropdown option (add blue background). To disable a dropdown option, you can use the .disabled class. ## Example Regular ItemActive ItemDisabled Item [Try it »](#) * * * ## Dropdown Menu Positioning If we want to right-align the dropdown menu, we can add .dropend or .dropstart classes after the .dropdown class on the element. .dropend is right-aligned, .dropstart is left-aligned. ## Example [Try it »](#) * * * ## Dropdown Menu Direction The default direction for dropdown menu to open is downward, but we can also set different directions. ### Specify Dropdown Menu Opens to the Right If you want the dropdown menu to open to the bottom right, you can add the .dropdown-menu-end class on the div element: ## Example [Try it »](#) ### Specify Dropup Menu If you want the menu to open upward, you can add the "dropup" class on the div element: ## Example [Try it »](#) ### Specify Dropdown Menu Opens to the Left If you want the dropdown menu to open upward, you can add the dropstart class on the div element: ## Example [Try it »](#) * * * ## Dropdown Menu Text Items The .dropdown-item-text class can set text items in the dropdown menu: ## Example

• Link 1
• Link 2
• Link 3
• Text Link
• Just Text

[Try it »](#) * * * ## Dropdown Menu in Button Group We can add dropdown menus in buttons: ## Example [Try it »](#) Vertical button group with dropdown menu: ## Example