Dropdowns

Single button dropdowns

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

                                                    
                                                        <!-- Default Drodown -->
                                                        <div class="dropdown">
                                                            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Dropdown button
                                                            </button>
                                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                            </div>
                                                        </div>
                                                        
                                                        <!-- Link with Dropdown -->
                                                        <div class="dropdown">
                                                            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Dropdown link
                                                            </a>
                                                            
                                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Variant

The best part is you can do this with any button variant, too:

                                                    
                                                        <!-- Light -->
                                                        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Secondary -->
                                                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        
                                                        <!-- Primary -->
                                                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Success -->
                                                        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Info -->
                                                        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Warning -->
                                                        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Danger -->
                                                        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                        
                                                        <!-- Dark -->
                                                        <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Action</a>
                                                        </div>
                                                    
                                                

Animated Dropdown

Add .dropdown-menu-animated to a .dropdown-menu to have animated dropdown menu.

                                                    
                                                        <div class="dropdown btn-group">
                                                            <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Animated Dropdown
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-animated">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent element.

                                                    
                                                        <!-- Default dropup button -->
                                                        <div class="btn-group dropup">
                                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
            
                                                        <!-- Split dropup button -->
                                                        <div class="btn-group dropup">
                                                            <button type="button" class="btn btn-light">
                                                                Split dropup
                                                            </button>
                                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Dropend variation

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

                                                    
                                                        <!-- Default dropend button -->
                                                        <div class="btn-group mb-2 dropend">
                                                            <button type="button" class="btn btn-primary   dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Dropend
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
            
                                                        <!-- Split dropend button -->
                                                        <div class="btn-group mb-2 dropend">
                                                            <button type="button" class="btn btn-primary ">
                                                                Split Dropend
                                                            </button>
                                                            <button type="button" class="btn btn-primary dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropright</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Disabled Item

Add .disabled to items in the dropdown to style them as disabled.

                                                    
                                                        <!-- Disabled -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-primary   dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Disabled
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Regular link</a>
                                                                <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
                                                                <a class="dropdown-item" href="#">Another link</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.

                                                    
                                                        <div class="dropdown">
                                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                Dropdown button
                                                            </button>
                                                            <ul class="dropdown-menu dropdown-menu-dark">
                                                                <li><a class="dropdown-item active" href="#">Action</a></li>
                                                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                                <li><hr class="dropdown-divider"></li>
                                                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                            </ul>
                                                        </div>
                                                    
                                                

Dropdown options

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

                                                    
                                                        <div class="d-flex">
                                                            <div class="dropdown me-1">
                                                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
                                                                    Offset
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-secondary">Reference</button>
                                                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                                    <li><hr class="dropdown-divider"></li>
                                                                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    
                                                

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

                                                    
                                                        <!-- Text Example -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-primary   dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Text Dropdown
                                                            </button>
                                                            <div class="dropdown-menu p-3 text-muted" style="max-width: 200px;">
                                                                <p>
                                                                    Some example text that's free-flowing within the dropdown menu.
                                                                </p>
                                                                <p class="mb-0">
                                                                    And this is more example text.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    
                                                

Menu alignment

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

                                                    
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-primary">Primary</button>
                                                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div><!-- /btn-group -->
                                                    
                                                

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

                                                    
                                                        <!-- Large button groups (default and split) -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Large button
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group">
                                                            <button class="btn btn-light btn-lg" type="button">
                                                                Large button
                                                            </button>
                                                            <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
            
                                                        <!-- Small button groups (default and split) -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Small button
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group">
                                                            <button class="btn btn-light btn-sm" type="button">
                                                                Small button
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Dropstart variation

Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.

                                                    
                                                        <!-- Default dropstart button -->
                                                        <div class="btn-group dropstart">
                                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Dropstart
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                                <a class="dropdown-item" href="#">Something else here</a>
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item" href="#">Separated link</a>
                                                            </div>
                                                        </div>
                                                        
                                                        <!-- Split dropstart button -->
                                                        <div class="btn-group">
                                                            <div class="btn-group dropstart" role="group">
                                                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true"
                                                                    aria-expanded="false">
                                                                    <span class="visually-hidden">Toggle Dropstart</span>
                                                                </button>
                                                                <div class="dropdown-menu">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-secondary">
                                                                Split dropleft
                                                            </button>
                                                        </div>
                                                    
                                                

Active Item

Add .active to item in the dropdown to style them as active.

                                                    
                                                        <!-- Active Item -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Active Menu
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Regular link</a>
                                                                <a class="dropdown-item active" href="#">Active link</a>
                                                                <a class="dropdown-item" href="#">Another link</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Headers

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

                                                    
                                                        <!-- Header Item -->
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Header
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <h6 class="dropdown-header">Dropdown header</h6>
                                                                <a class="dropdown-item" href="#">Action</a>
                                                                <a class="dropdown-item" href="#">Another action</a>
                                                            </div>
                                                        </div>
                                                    
                                                

Centered dropdowns

Make the dropdown menu centered below the toggle with .dropdown-center on the parent element.

                                                    
                                                        <div class="dropdown-center">
                                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                Centered dropdown
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li><a class="dropdown-item" href="#">Action</a></li>
                                                                <li><a class="dropdown-item" href="#">Action two</a></li>
                                                                <li><a class="dropdown-item" href="#">Action three</a></li>
                                                            </ul>
                                                        </div>
    
                                                        <div class="dropup-center dropup">
                                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                Centered dropup
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li><a class="dropdown-item" href="#">Action</a></li>
                                                                <li><a class="dropdown-item" href="#">Action two</a></li>
                                                                <li><a class="dropdown-item" href="#">Action three</a></li>
                                                            </ul>
                                                        </div>
                                                    
                                                

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

                                                    
                                                        <div class="hstack gap-2">
                                                            <div class="btn-group">
                                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                                                                    Default dropdown
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                </ul>
                                                            </div>
                                                            
                                                            <div class="btn-group">
                                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                                                    Clickable inside
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                </ul>
                                                            </div>
                                                            
                                                            <div class="btn-group">
                                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                                    Clickable outside
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                </ul>
                                                            </div>
                                                            
                                                            <div class="btn-group">
                                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                                                                    Manual close
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    
                                                

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position