Dropdown

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Basic Dropdown

Any single .btn can be turned into a dropdown toggle with some markup changes. .dropdown or .btn-group class used as wrapper of dropdown toggle and dropdown menu.

Class Value
class="btn btn-{value} dropdown-toggle" primary | secondary | success | danger | warning | info | dark
Split Dropdown

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.

<!-- split primary button -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Split Dropdown</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </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>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
  </ul>
</div>
Hidden Arrow

Use class .hide-arrow to hide dropdown arrow.

<!-- hidden arrow -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">Hidden Arrow</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>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </li>
  </ul>
</div>
Open on Hover

You need to include below JS file for dropdown to work on hover.

<script src="assets/vendor/js/dropdown-hover.js"></script>

Use a data attribute data-trigger="hover" to work dropdown on hover.

<!-- On hover dropdown button -->
<div class="btn-group" id="hover-dropdown-demo">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-trigger="hover">Hover</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>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li> <a class="dropdown-item" href="javascript:void(0);">Separated link</a> </li>
  </ul>
</div>

Alignment

Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.

Use .dropdown-menu-end class with .dropdown-menu to right align the dropdown menu. Use .dropdown-menu-start class with .dropdown-menu to left align the dropdown menu.

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.

<!-- Left-aligned but right in large screen -->
<div class="btn-group me-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" 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>
<!-- Right-aligned but left in large screen -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" 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>

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

Class Value
class="btn btn-primary btn-{value}" xl | lg | sm | xs

Default dropdown menus trigger below to the parent element.

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.

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

Non-interactive Dropdown

You can also create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities.

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><span class="dropdown-item-text">Dropdown item text</span></li>
    <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>
Active Dropdown Item

Add .active class to items in the dropdown to style them as active.

<!-- Dropdown with active item -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><span class="dropdown-item-text">Dropdown item text</span></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="dropdown-item active" href="javascript:void(0);">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
  </ul>
</div>
Disabled Dropdown Item

Add .disabled class to items in the dropdown to style them as disabled.

<!-- Dropdown with disabled item -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><span class="dropdown-item-text">Dropdown item text</span></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="dropdown-item disabled" href="javascript:void(0);">Another action</a></li>
    <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
  </ul>
</div>

Menu Content

Headers

Add a header to label sections of actions in any dropdown menu.

<!-- Menu content Headers -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <h6 class="dropdown-header">Dropdown header</h6>
    </li>
    <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>
  </ul>
</div>
Dividers

Separate groups of related menu items with a divider.

 <!-- Menu content Dividers -->
 <div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </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>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
  </ul>
</div>
Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

<!-- Menu content text -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
    <p>Some example text that's free-flowing within the dropdown menu.</p>
    <p class="mb-0">And this is more example text.</p>
  </div>
</div>
Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

New around here? Sign up Forgot password? 
<!-- Menu content forms -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <form class="px-4 py-3">
      <div class="mb-3">
        <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="mb-3">
        <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
      </div>
      <button type="button" class="btn btn-primary">Sign in</button>
    </form>
    <hr class="dropdown-divider">
    <a class="dropdown-item" href="javascript:void(0)">New around here? Sign up</a>
    <a class="dropdown-item" href="javascript:void(0)">Forgot password?</a>
  </div>
</div>

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

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.

<!-- Default 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:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
  </ul>
</div>

<!-- Clickable outside -->
<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:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
  </ul>
</div>

<!-- Clickable inside -->
<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:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
  </ul>
</div>

<!-- Manual close -->
<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:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
    <li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
  </ul>
</div>
© 2017- Pixinvent, Hand-crafted & Made with ❤️