Do you know the latest update of 2022? 🎉 Our roadmap is alive for future updates.

Notifications

4 New

New message received 💌 24 unread messages.

Congratulations team 🎉 You have 12 new sales!

Network Error ⛔️ Operation couldn’t be completed

Disk Utility 💥 You have not enough disk capacity

Dropdown

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

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:

And with <a> elements:

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

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item active" aria-current="true" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
  </ul>
</div>

<div class="dropdown">
  <a class="btn btn-primary dropdown-toggle" href="javascript:;" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
  </ul>
</div>

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

  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  
  <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  
  <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>

  <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="javascript:;">Separated link</a></li>
  </ul>
</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 type="button" class="btn btn-danger">Action</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>
  
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="javascript:;">Separated link</a></li>
  </ul>
</div>

Sizing

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

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

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

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

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>

  <ul class="dropdown-menu">
    ...
  </ul>
</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>

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</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>

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</div>

Dropright

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-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</div>

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

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</div>

Dropleft

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-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</div>

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

  <ul class="dropdown-menu">
    <li>...</li>
  </ul>
</div>

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

                            
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>

  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Alignment options

Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.

                            
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<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">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

Dropdown options

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

                            
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
    Offset
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
    <li><a class="dropdown-item" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Reference</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
    <li><a class="dropdown-item" href="javascript:;">Action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="javascript:;">Separated link</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="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:;">Menu item</a></li>
  </ul>
</div>

My Cart

Smart Watches 3