Dropdown menus are toggleable, non-invasive, contextual dialogs for displaying lists of links. In CNVS, we’ve made dropdown menus interactive with the Bootstrap JavaScript Plugin. Use the .dropdown-menu and expected markup to create a dropdown menu. To toggle the display of a dropdown menu, add the class .dropdown-toggle to the triggering element, and wrap both the .dropdown-toggle and the .dropdown-menu in an element of class .dropdown.

<div class="dropdown">
  <button type="button" class="button dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <span class="dropdown-menu" role="menu">
    …
  </span>
</div>

Dropdown Menu List

Central to the function of dropdown menu is the dropdown menu list, which, as the name implies, is a collection of related links or actions. A dropdown menu list is create by adding the class .dropdown-menu-list to a ul or ol list element. A dropdown menu may have more than one dropdown menu lists. Headers and dividers are often used to differentiate multiple dropdown menu lists.

<span class="dropdown-menu" role="menu">
  <ul class="dropdown-menu-list">
    <li>
      <a href="#" role="menuitem" tabindex="-1">
        Action
      </a>
    </li>
    …
  </ul>
</span>

Dropdown Headers

Headers are an effective way to label sections of actions in any dropdown menu and to help separate one dropdown menu list from another. Wrap text in the class .dropdown-menu-header to give the appearance of a header.

<span class="dropdown-menu" role="menu">
  <span class="dropdown-menu-header">
    Dropdown Header
  </span>
  <ul class="dropdown-menu-list">
    …
  </ul>
</span>

Menu Dividers

Dividers are a simple and effective way to break up a dropdown menu and create obvious separate between sets of dropdown menu lists. Adding the class .dropdown-menu-divider to an empty span element is the fastest way to create a dropdown menu divider.

<span class="dropdown-menu" role="menu">
  <span class="dropdown-menu-divider">
  </span>
</span>

Dropdown Menu List States

To signal selection or communicate caution in dropdown menu lists, consider taking advantage of the included dropdown menu list item states. Adding the relevant class to any li in a .dropdown-menu-list will adjust the style of the item to best reflect the intended state.

<span class="dropdown-menu" role="menu">
  <ul class="dropdown-menu-list">
    …
    <li class="disabled">
      <a href="#">
        Another action
      </a>
    </li>
    …
    <li class="danger">
      <a href="#">
        Danger Link
      </a>
    </li>
    …
  </ul>
</span>

Inverse Styling

Add class .dropdown-menu-inverse to a .dropdown-menu to inverted it’s appearance.

<span class="dropdown-menu dropdown-menu-inverse" role="menu">
  …
</span>

Dropdown Menu List Item Content

It may be necessary to place more than just text inside of a dropdown menu list item. For example, you may want a small icon next to the dropdown menu list item label to help better communicate an action or signal selection. Place an element before or after text in a dropdown menu list item and space will be applied between the element(s) and the text.

<span class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  …
</span>

Alignment

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.

<span class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  …
</span>