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.

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-boodoo-toggle="dropdown"
    aria-expanded="false">Dropup</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

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

<div class="dropdown d-inline-block">
  <button class="btn btn-primary dropdown-toggle" type="button" data-boodoo-toggle="dropdown"
    aria-expanded="false">Right-aligned menu</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>
Link with text Plain text item 
<div class="dropdown d-inline-block">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-boodoo-toggle="dropdown"
    aria-expanded="false">Menu items</button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item-text" href="#">Link with text</a>
    <span class="dropdown-item-text">Plain text item</span>
  </div>
</div>

Dark dropdowns

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

<div class="dropdown d-inline-block">
  <button class="btn btn-dark dropdown-toggle" type="button" data-boodoo-toggle="dropdown" aria-expanded="false">Dark
    menu</button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Split button

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