Dropdown (Requires JavaScript)

Dropdowns can be used for toggleable, contextual overlays (menus) that display links, forms, and other content.

Click on the following button to open a dropdown menu.

<div class="dropdown">
  <button class="btn" data-toggle="dropdown" type="button" id="dropdown-toggle-btn-1" aria-haspopup="true" aria-expanded="false">
    Click me <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown-toggle-btn-1">
    <h6 class="dropdown-header">Header</h6>
    <a href="#" class="dropdown-item">Link 1</a>
    <a href="#" class="dropdown-item">Link 2</a>
    <div class="dropdown-divider"></div>
    <div class="dropdown-content">
      <button class="btn btn-block" type="button">Button</button>
    </div>
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

How it works

When an element with the attribute data-toggle="dropdown" and an element with the class .dropdown-menu are placed inside a parent container element with the class .dropdown, the system will toggle the dropdown menu whenever the toggle is clicked. This works by adding/removing the class .active to/from the toggle, and by adding/removing the class .show to/from the parent container element. The dropdown toggle does not have to be a button, it can be any other appropriate element, for example, links, links styled as buttons, navbar items, etc.

The following can be used inside the dropdown menu:

  • .dropdown-header — can be used to create titles for the dropdown menu.
  • .dropdown-item — can be used for the main links.
  • .dropdown-divider — can be used to create dividers, by adding the class to a <div> element.
  • .dropdown-content — can be used on containers for other content, such as inputs, buttons, forms, and so on. This provides spacing to match with the headers, links and dividers.

On a side note, the icon being used is part of the Font Awesome 4.7.0 iconset.

Dropup variation #

Dropdown menus can be made to open up (instead of down) by adding the class .dropup to the dropdown container (.dropdown). Once again, these menus can be aligned alternatively in the following ways:

  • .dropdown-menu-center aligns the menu horizontally to the center.
  • .dropdown-menu-right aligns the menu horizontally to the right.
<!-- Default dropup menu -->
<div class="dropdown dropup with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Default <i class="fa fa-angle-up ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropup menu aligned to the center -->
<div class="dropdown dropup with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Center <i class="fa fa-angle-up ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-center" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropup menu aligned to the right -->
<div class="dropdown dropup with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Right <i class="fa fa-angle-up ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Dropright variation #

Dropdown menus can be made to open to the right by adding the class .dropright to the dropdown container (.dropdown). By default, these menus will be aligned vertically towards the downward direction. However, they can be aligned alternatively in the following ways:

  • .dropdown-menu-center aligns the menu vertically to the center.
  • .dropdown-menu-up aligns the menu vertically towards the upward direction.


<!-- Default dropright menu -->
<div class="dropdown dropright with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Default <i class="fa fa-angle-right ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropright menu aligned to the center (vertically) -->
<div class="dropdown dropright with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Center <i class="fa fa-angle-right ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-center" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropright menu aligned towards the upward direction -->
<div class="dropdown dropright with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Upward <i class="fa fa-angle-right ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-up" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Dropleft variation #

Dropdown menus can be made to open to the left by adding the class .dropleft to the dropdown container (.dropdown). By default, these menus will be aligned vertically towards the downward direction. However, they can be aligned alternatively in the following ways:

  • .dropdown-menu-center aligns the menu vertically to the center.
  • .dropdown-menu-up aligns the menu vertically towards the upward direction.


<!-- Default dropleft menu -->
<div class="dropdown dropleft with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-angle-left mr-5" aria-hidden="true"></i> Default <!-- mr-5 = margin-right: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropleft menu aligned to the center (vertically) -->
<div class="dropdown dropleft with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-angle-left mr-5" aria-hidden="true"></i> Center <!-- mr-5 = margin-right: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-center" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Dropleft menu aligned towards the upward direction -->
<div class="dropdown dropleft with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-angle-left mr-5" aria-hidden="true"></i> Upward <!-- mr-5 = margin-right: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu dropdown-menu-up" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Displaying other content #

As mentioned above, other content (such as inputs, buttons, and forms) can be placed in dropdown menus by putting them inside an element with the class .dropdown-content. This will give them the appropriate padding to match with the headers, links and dividers. This along with simple utility classes can be used to create some very useful dropdown menus.

<!-- Displaying other content -->
<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown" type="button" id="sign-in-dropdown-toggle-btn" aria-haspopup="true" aria-expanded="false">
    Sign in <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu w-250 w-sm-350" aria-labelledby="sign-in-dropdown-toggle-btn"> <!-- w-250 = width: 25rem (250px), w-sm-350 = width: 35rem (350px) only on devices where width > 576px -->
    <div class="dropdown-content p-20"> <!-- p-20 = padding: 2rem (20px) -->
      <form action="..." method="...">
        <div class="form-group">
          <label for="username" class="required">Username</label>
          <input type="text" name="username" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <label for="password" class="required">Password</label>
          <input type="password" name="password" class="form-control" placeholder="Password" required="required">
        </div>
        <input class="btn btn-primary btn-block" type="submit" value="Sign in">
        <div class="text-right mt-10"> <!-- text-right = text-align: right, margin-top: 1rem (10px) -->
          <a href="#" class="hyperlink">Forgot password?</a> <!-- hyperlink = used on regular links to remove anti-aliasing in dark mode --> 
        </div>
      </form>
    </div>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item text-center">Don't have an account? Sign up</a> <!-- text-center = text-align: center -->
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Since the width of the dropdown menu depends on the width of the widest element within it, it is often a good idea to set the width using sizing utility classes (opens in new tab), as can be seen in the above example.

Toggle on hover #

Dropdown menus can also be made to toggle on hover by adding the class .toggle-on-hover to the dropdown container (.dropdown). These dropdown menus will stay open as long as the toggle or the menu is hovered over.

While they require no JavaScript, it is still recommended that the data-toggle="dropdown" attribute is used, so that the menu can be toggled by both hover and clicks on the toggle.

<!-- Dropdown that can be toggled by both hover and clicks on the toggle -->
<div class="dropdown toggle-on-hover">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    On hover <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </button>
  <div class="dropdown-menu" aria-labelledby="...">
    ...
  </div>
</div>

<!-- Required only if the data-toggle="dropdown" attribute is used on the toggles -->
<script src="path/to/halfmoon.js"></script>

Usage as popovers #

It should be pretty obvious from the various examples found on this page that dropdowns can be used as popovers. For instance, the next example shows a popover (dropright) that opens when the user clicks on the avatar.

<!-- Popover (dropright) that opens when the user clicks on the avatar -->
<div class="dropdown dropright with-arrow">
  <a href="#" data-toggle="dropdown" id="avatar-popover-toggle" aria-haspopup="true" aria-expanded="false">
    <img src="..." class="rounded-circle w-50 h-50" alt="..."> <!-- rounded-circle = border-radius: 50%, w-50 = width: 5rem (50px), h-50 = height: 5rem (50px) -->
  </a>
  <div class="dropdown-menu dropdown-menu-center" aria-labelledby="avatar-popover-toggle">
    <h6 class="dropdown-header">Jane Doe</h6>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">See activity</a>
    <a href="#" class="dropdown-item">Add as friend</a>
  </div>
</div>

Usage in other places #

Dropdowns are very useful elements which can be used in many different places. For example, inside input groups (opens in new tab), and in navbars (opens in new tab). The important thing to remember is that the wrapping container with the .dropdown class is always required.


Up next: Modal

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.