Get support Purchase Now Preview Demo

Dropdowns

Toggle contextual overlays for displaying lists of links and more.

Bootstrap Dropdown documentation share-external-link-1

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.

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here 
<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>