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