Dropdowns

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> or <a> elements. The best part is you can do this with any button variant, too.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Primary
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group -->

Split 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-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group -->

Sizing and Colors

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. 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.

<!-- small dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Small
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group -->

<!-- normal dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Normal
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group -->

<!-- large dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Large
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group -->

<!-- light dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-highlight dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Light Dropdown
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Some 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><!-- / dropdown-menu -->
</div><!-- / btn-group -->

<!-- dark dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dark Dropdown
    </button><!-- / dropdown-toggle -->

    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Some 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><!-- / dropdown-menu -->
</div><!-- / btn-group -->

Dropdown Positions

Trigger dropdown menus above elements by adding .dropup to the parent element. Trigger dropdown menus at the right of the elements by adding .dropend to the parent element. Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element.

<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </button>
    <ul class="dropdown-menu dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group dropup -->

<div class="btn-group dropstart">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropleft
    </button>
    <ul class="dropdown-menu dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group dropstart -->

<div class="btn-group dropend">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropright
    </button>
    <ul class="dropdown-menu dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul><!-- / dropdown-menu -->
</div><!-- / btn-group dropend -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav