Sections

Content

Layout

Navigation

Dropdowns

A dropdown can display lists of links and other content within a contextual overlay.

In this article

Usage

Dropdowns must have a .dropdown-menu element as well as a .dropdown-toggle element, which is typically a button or a link used to toggle the menu. Use .dropdown-item on each item within the .dropdown-menu.

<div class="dropdown">
  <button class="not-a-button dropdown-toggle" aria-haspopup="true">
    Sort by
    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
      <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
    </svg>
  </button>
  <div class="dropdown-menu" role="menu" aria-expanded="true">
    <a class="dropdown-item" aria-selected="false" role="menuitem" href="#">
      Recent activity
    </a>
    <a class="dropdown-item" aria-selected="false" role="menuitem" href="#">
      Votes
    </a>
  </div>
</div>

States

Active

Use our standard .is-active modifier class to identify a .dropdown-item as active:

<div class="dropdown-menu" role="menu">
  <a class="dropdown-item is-active" role="menuitem" href="#">Recent activity</a>
  <a class="dropdown-item" role="menuitem" href="#">Votes</a>
</div>

Or through the use of the [aria-selected] attribute, which mirrors the styles applied to Zendesk’s application dropdown menus:

<div class="dropdown-menu" role="menu">
  <a class="dropdown-item" aria-selected="true" role="menuitem" href="#">
    Recent activity
  </a>
  <a class="dropdown-item" aria-selected="false" role="menuitem" href="#">
    Votes
  </a>
</div>

Disabled

Use .is-disabled to dropdown items to style a .dropdown-item as disabled:

Regular link Disabled link Another link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item is-disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Content

Mixed content

Add any type of content to dropdown items using text utilities.

Some example text that's free-flowing within the dropdown menu.

And this is more example text. 

<div class="dropdown-menu p-4 text-gray-600">
  <p>Some example text that's free-flowing within the dropdown menu.</p>
  <p class="mb-0">And this is more example text.</p>
</div>

Dividers

Groups of related menu items can be separated using a divider.

Action Another action Something else here
Separated link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="hr my-2"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>