Bootstrap 5 Dropdowns

• Bootstrap Images
• Bootstrap Button Groups

Add dropdown menus without writing any JavaScript.

Bootstrap includes a component for adding dropdown menus. The JavaScript is included with the default Bootstrap JS file and you can use it simply by adding the CSS classes — no further JavaScript required.

Example

Here's an example of a Bootstrap 5 dropdown:

Dropup Menu

You can reverse the dropdown so that it becomes a "dropup" menu.

To do this, use .dropup instead of .dropdown on the parent element.

Align Right

You can add Bootstrap's .dropdown-menu-end class to the .dropdown-menu class to align the menu to the right of its parent.

Menu Headers

Add a header to your dropdown menu by adding a applying Bootstrap's .dropdown-header class to a heading element (<h1> - <h6>).

Dividers

Add dividers to your dropdown menu by adding a applying Bootstrap's .dropdown-divider class to an <hr> element.

Disabled Menu Items

Disable a menu item by applying Bootstrap's .disabled class.

Split Dropdowns

You can also create split dropdown menus with button groups.

More on Dropdowns

See the Bootstrap documentation for more on dropdowns.

• Bootstrap Images
• Bootstrap Button Groups