Dropdowns

Toggle contextual overlays for displaying lists of links and more.

Single button

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:

<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">
        <li><a class="dropdown-item" href="javascript: void(0);">Action</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Another action</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Something else here</a></li>
    </ul>
</div>

And with <a> elements:

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="javascript: void(0);" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>
  
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="javascript: void(0);">Action</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Another action</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Something else here</a></li>
    </ul>
</div>

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

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

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonPrimary">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonSecondary" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSecondary">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButtonSuccess" data-bs-toggle="dropdown" aria-expanded="false">
        Success
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSuccess">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButtonInfo" data-bs-toggle="dropdown" aria-expanded="false">
        Info
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonInfo">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButtonWarning" data-bs-toggle="dropdown" aria-expanded="false">
        Warning
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWarning">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButtonDanger" data-bs-toggle="dropdown" aria-expanded="false">
        Danger
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDanger">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

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

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

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

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

Split button

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.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

<div class="btn-group">
    <button class="btn btn-primary" type="button" id="dropdownMenuSplitButtonPrimary" data-bs-toggle="dropdown" aria-expanded="false">
        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>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonPrimary">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-secondary" type="button" id="dropdownMenuSplitButtonSecondary" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary
    </button>

    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonSecondary">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-success" type="button" id="dropdownMenuSplitButtonSuccess" data-bs-toggle="dropdown" aria-expanded="false">
        Success
    </button>

    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonSuccess">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-info" type="button" id="dropdownMenuSplitButtonInfo" data-bs-toggle="dropdown" aria-expanded="false">
        Info
    </button>

    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonInfo">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-warning" type="button" id="dropdownMenuSplitButtonWarning" data-bs-toggle="dropdown" aria-expanded="false">
        Warning
    </button>

    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonWarning">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-danger" type="button" id="dropdownMenuSplitButtonDanger" data-bs-toggle="dropdown" aria-expanded="false">
        Danger
    </button>

    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonDanger">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

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

    <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonDark">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

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

    <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButtonLight">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

Sizing

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

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

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLg">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>
  
<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonDefault" data-bs-toggle="dropdown" aria-expanded="false">
        Default button
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDefault">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>
  
<div class="btn-group">
    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonSm" data-bs-toggle="dropdown" aria-expanded="false">
        Small button
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSm">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
    </div>
</div>

Dropup

Trigger dropdown menus above elements by adding .dropup 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>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>

<div class="btn-group dropup">
    <button type="button" class="btn btn-primary">
        Split dropup
    </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>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>

Dropup centered

Make the dropup menu centered above the toggle with .dropup-center on the parent element.

<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="javascript: void(0);">Action</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Action two</a></li>
        <li><a class="dropdown-item" href="javascript: void(0);">Action three</a></li>
    </ul>
</div>

Dropend

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

<div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>

<div class="btn-group dropend">
    <button type="button" class="btn btn-secondary">
        Split dropend
    </button>

    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropend</span>
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>

Dropstart

Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element.

<div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>

<div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary">
        Split dropstart
    </button>

    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropstart</span>
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript: void(0);">Action</a>
        <a class="dropdown-item" href="javascript: void(0);">Another action</a>
        <a class="dropdown-item" href="javascript: void(0);">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript: void(0);">Separated link</a>
    </div>
</div>