New message!

Jane Doe just sent you a new message.

Content and cards

Textarea
Pagination
Text utilities

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.

Shortcuts

One way of dismissing dropdown menus (apart from clicking anywhere outside of the menu) is by pressing the esc key. The items inside can also be explored using the tab key.

<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.

Dropdown with arrow #

Dropdowns with the class .with-arrow will have a tiny arrow indicating where the dropdown menu pops in from.

<!-- Dropdown with arrow -->
<div class="dropdown with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." 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="...">
    ...
  </div>
</div>

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

Menu alignment #

By default, dropdown menus are aligned to the left. However, they can 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 dropdown menu -->
<div class="dropdown with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Default <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>

<!-- Dropdown menu aligned to the center -->
<div class="dropdown with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Center <i class="fa fa-angle-down 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>

<!-- Dropdown menu aligned to the right -->
<div class="dropdown with-arrow">
  <button class="btn" data-toggle="dropdown" type="button" id="..." aria-haspopup="true" aria-expanded="false">
    Right <i class="fa fa-angle-down 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>

Note that the .with-arrow class used in the above example is completely optional. The menus can be aligned without the use of arrows.

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

On this page

Dropdown Dropdown with arrow Menu alignment Dropup variation Dropright variation Dropleft variation Displaying other content Toggle on hover Usage as popovers Usage in other places

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Backers

The following people have generously decided to support Halfmoon.

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.

New message!

Getting started Introduction | Download | Customize | Page building | Starter template generator

Building blocks Containers | Content and cards | Grid system | Navbar | Sidebar

Basic elements Buttons | Code | Image | Links | Tables

Form elements Form | Input | Select | Textarea | Checkbox | Radio | Switch | File input | Input group

Advanced components Alerts | Badges | Breadcrumb | Button group | Collapse | Dropdown (And popover) | Modal | Pagination | Progress | Sticky alerts (Toasts) | Tooltips

Common utilities Display utilities | Flex utilities | Position utilities | Sizing utilities | Spacing utilities | Text utilities

Other utilities Border utilities | Box shadow utilities | Color utilities | Float utilities | Overflow utilities | Pointer events utilities | Screen reader utilities | Vertical align utilities | Visibility utilities | Z-index utilities

JavaScript Core JavaScript library

Others Internet Explorer support