Skip to main content

Button Dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.


                <!-- Single button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Action
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            

Dropup variation

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


                <div class="btn-group dropup">
                    <button type="button" class="btn btn-default">Dropup</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <!-- Dropdown menu links -->
                    <ul class="dropdown-menu">
                    </ul>
                </div>