Dropdowns
Dropdown menu forced open
<div class="flex justify-center">
<div class="dropdown dropdown-open" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-up" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout top center
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-up" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout top left
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-up direction-left" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout top right
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-up direction-right" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout bottom center
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-down" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout bottom left
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-down direction-left" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>Dropdown menu flyout bottom right
<div class="flex justify-center">
<div class="dropdown" tabindex="0">
<button type="button" class="btn-default">
Options
<i class="fa-light fa-chevron-down text-xs items-center"></i>
</button>
<div class="dropdown-content direction-down direction-right" tabindex="-1">
<div class="dropdown-menu">
<a href="#" tabindex="-1">Account settings</a>
<a href="#" tabindex="-1">Support</a>
<a href="#" tabindex="-1">License</a>
</div>
</div>
</div>
</div>