Skip to main content

Dropdowns

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

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and actions. They're toggled by clicking (or focusing) their trigger. All dropdowns are powered by boodoo's vanilla JS and initialized from data-boodoo-toggle="dropdown".

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
          data-boodoo-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Dropdown header</h6></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropup

By default, dropdown menus display below their trigger. Add .dropup to the parent to make them open upward instead.

Add .dropdown-menu-end to align the menu to the right of the trigger.

Link with text Plain text item

Dark dropdowns

Add .dropdown-menu-dark to invert the dropdown palette.

Split button

Create a split dropdown: the caret part triggers the menu while the first part acts as a normal button.