Dropdowns

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

In this article

Usage

Use .dropdown to create a dropdown element and .dropdown-menu to create a dropdown menu. By default, dropdown menu items are styled using .dropdown-item.

Dropdown menu functionality is provided using Alpine JS, which you can apply by adding x-data="dropdown" to the .dropdown element. The element used to toggle the menu must have a x-ref="toggle" property and the dropdown menu itself must have a x-ref="menu" property.

<div class="dropdown" x-data="dropdown" @click.away="close">
  <button class="not-a-button" id="toggle" aria-haspopup="true" x-ref="toggle" :aria-expanded="isExpanded">
    Sort by
    <svg class="svg-icon" :class="{ 'rotate-180': isExpanded }" 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 dropdown-menu-start" aria-labelledby="toggle" x-ref="menu" :aria-expanded="isExpanded">
    <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:

<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.

<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.

<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>

Questions or feedback about this article? Let us know