Dropdowns

Display lists in contextual overlays.

Overview

Dropdowns present a list of options from which a user can make one or more selections. For example, users can filter or sort existing content on a page by selecting an option from a dropdown.

Dropdowns can contain an optional icon to convey further meaning.

For more dropdown configuration options, including how to change the sizing and menu direction, see Bootstrap Dropdowns documentation.

Primary

Primary styling should only be used once on a page for the default or highest priority action, and shouldn’t be used to style dropdowns. For more information about primary styled buttons, see the Primary section of the button documentation.

Secondary

Secondary dropdowns contain a set of options that can affect the data shown in the current page or view. For example, use a secondary dropdown when changing the number of records shown on a list page.

<div class="btn-group">
    <button type="button" id="secondaryToggleIconTextDropdown" class="btn btn-secondary dropdown-toggle" title="Icon Text" data-toggle="dropdown" aria-label="Icon Text" aria-haspopup="true" aria-expanded="false">
      <i class="fa fas fa-user pr-2"></i>Icon Text
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconTextDropdown">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" id="secondaryToggleTextDropdown" class="btn btn-secondary dropdown-toggle" title="Text" data-toggle="dropdown" aria-label="Text" aria-haspopup="true" aria-expanded="false">
      Text
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleTextDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" id="secondaryToggleIconTextDropdownDisabled" class="btn btn-secondary dropdown-toggle" disabled title="Icon Text" data-toggle="dropdown" aria-label="Icon Text" aria-haspopup="true" aria-expanded="false">
      <i class="fa fas fa-user pr-2"></i>Icon Text
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconTextDropdownDisabled">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" id="secondaryToggleIconDropdownDisabled" class="btn btn-secondary dropdown-toggle" disabled title="Text" data-toggle="dropdown" aria-label="Text" aria-haspopup="true" aria-expanded="false">
      Text
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

Tertiary

Tertiary dropdowns are utilized for hierarchically less important lists of options.

<div class="btn-group">
    <button type="button" id="tertiaryToggleIconTextDropdown" class="btn btn-tertiary dropdown-toggle" title="Icon Text" data-toggle="dropdown" aria-label="Icon Text" aria-haspopup="true" aria-expanded="false">
      <i class="fa fas fa-user pr-2"></i>Icon Text
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-tertiary" aria-labelledby="tertiaryToggleIconTextDropdown">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" id="tertiaryToggleTextDropdown" class="btn btn-tertiary dropdown-toggle" title="Text" data-toggle="dropdown" aria-label="Text" aria-haspopup="true" aria-expanded="false">
      Text
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-tertiary" aria-labelledby="tertiaryToggleTextDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" id="tertiaryToggleIconTextDropdownDisabled" class="btn btn-tertiary dropdown-toggle" disabled title="Icon Text" data-toggle="dropdown" aria-label="Icon Text" aria-haspopup="true" aria-expanded="false">
      <i class="fa fas fa-user pr-2"></i>Icon Text
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-tertiary" aria-labelledby="tertiaryToggleIconTextDropdownDisabled">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" id="tertiaryToggleIconDropdownDisabled" class="btn btn-tertiary dropdown-toggle" disabled title="Text" data-toggle="dropdown" aria-label="Text" aria-haspopup="true" aria-expanded="false">
      Text
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-tertiary" aria-labelledby="tertiaryToggleIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>