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