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>