Dropdown
Requires Alpine.js. Click the trigger to open or close, and click outside to dismiss.
Default dropdown with sections
<div class="dropdown" x-data="{ open: false }">
<button
x-on:click="open = !open"
:aria-expanded="open"
aria-controls="dd-demo-panel"
class="dropdown-trigger">
Options
<svg class="h-4 w-4 text-gray-400">...</svg>
</button>
<div
x-show="open"
x-transition.origin.top.left
@click.outside="open = false"
id="dd-demo-panel"
class="dropdown-panel dropdown-panel-left">
<div class="dropdown-section">
<a class="dropdown-item">Settings</a>
<a class="dropdown-item">Help</a>
</div>
<div class="dropdown-section">
<a class="dropdown-item dropdown-item-danger">Log out</a>
</div>
</div>
</div>
<!-- Panel positions: dropdown-panel-left, dropdown-panel-right -->
<!-- Wide panel: add dropdown-panel-wide -->