Skip to main content

Dropdowns

Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus. Their use as menus can be seen in tabs. At a smaller screen size, the tabs collapse into a dropdown.

Overview

Please read this article when using dropdown menu for more styles and JavaScript calls. Bootstrap Dropdown

To use a dropdown, create a .dropdown parent container. The container should have 2 children, a button element and a .dropdown-menu container. The button should have appropriate .btn- styling as well as a .dropdown-toggle class to create a caret icon. The menu can contain any number of .dropdown-item links.

Simple Button Dropdowns 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<div class="dropdown ml-3">
  <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Anchor tag
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Color Variants

Button Dropdowns can be any variety of button style and color. Simply use the desired .btn-{theme-color} class.

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

Use .btn-lg or .btn-sm to change the size of the dropdown button.

Icon Button Dropdowns

Icon buttons can also function as dropdowns. Simply remove .button-toggle to eliminate the caret icon. 

<div class="dropdown">
  <button class="btn btn-lg btn-icon-only btn-text-dark" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="modus-icons notranslate" aria-hidden="true">settings</i>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Dropdowns can be triggered in 4 different directions. Simply use .dropdown or .dropup on the parent container. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Down
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<div class="dropup ml-3">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Up
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Dropdown menu items don’t have to be links. You also have the option of using <button> elements. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Sizes

For niche cases, dropdown menus can be given a max-height using the following modifier classes:

  • .dropdown-menu-sm- 140px
  • .dropdown-menu-md - 240px
  • .dropdown-menu-lg - 400px 
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu dropdown-menu-sm">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu dropdown-menu-md">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu dropdown-menu-lg">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>
</div>

Active

Add an .active class to items to style them as active. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>
</div>

Disabled

Add an .disabled class to items to style them as disabled. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>
</div>

Headers

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

Action Another action 
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu">
  <h6 class="dropdown-header" id="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>
</div>

Dividers

Separate groups of related menu items with a divider.

Action Another action Something else here
Separated link

Text

Place any freeform text within a dropdown menu with text. Note: 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. 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-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? 
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" autocomplete="email" class="form-control" id="exampleDropdownFormEmail1">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" autocomplete="off" class="form-control" id="exampleDropdownFormPassword1">
    </div>
    <div class="form-group">
      <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="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item small" href="#">New around here? Sign up</a>
  <a class="dropdown-item small" href="#">Forgot password?</a>
</div>
</div>
On this page
More Information