Dropdowns

Dropdowns
Outline Button Dropdowns
Single dropdown buttons
Rounded Outline Dropdowns
Rounded Button Dropdowns
Split buttons
Dropdown Sizing
Disabled
Auto close behavior
dropdowns with Forms
Dropdown menu centered

Use .dropdown-center on the parent element.

Dropup centered

Use .dropup-centeron the parent element.

Menu items

You can use <a> or <button> as dropdown items.

Dropdowns options

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

Dropup
Dropup right
Active
Dropup left
Alignment options
Dark Dropdowns
non-interactive dropdown items

Use .dropdown-item-text. to create non-interactive dropdown items.

  • Dropdown item text
    • ActionAnother actionSomething else here
    Dropdown Headers

    Add a .dropdown-header to label sections of actions in any dropdown menu.

    Dropdown header
    ActionAnother actionSomething else here
    Dropdown Dividers
    Heading
    ActionAnother actionSomething else here Separated link
    Dropdown Menu Text

    Some example text that's free-flowing within the dropdown menu.

    And this is more example text.

    Menu alignment
    Responsive alignment end
    Responsive alignment left
    Custom Dropdown Menu's
    Ghost Button Dropdowns