Dropdown

The dropdown (.dropdown) is a self-contained trigger-plus-panel component for actions and selections, similar to .menu but simpler to wire up: it needs no separate anchor wrapper or aria-controls pairing, because flickui.js recognizes a .dropdown-trigger clicked inside a .dropdown and toggles that same panel directly.

<div class="dropdown">
  <button type="button" class="dropdown-trigger" aria-haspopup="menu" aria-expanded="false">
    <span class="dropdown-label">Actions</span>
    <span class="dropdown-icon" aria-hidden="true">▾</span>
  </button>
  <ul class="dropdown-panel" role="menu" hidden>
    <li role="presentation">
      <button type="button" class="dropdown-item action-select" id="dropdown-demo-edit" role="menuitem">
        <span class="dropdown-item-icon" aria-hidden="true">✎</span>
        <span class="dropdown-item-label">Edit</span>
        <kbd class="dropdown-item-shortcut" aria-hidden="true">⌘E</kbd>
      </button>
    </li>
    <li role="separator"><hr class="dropdown-separator"></li>
    <li role="presentation">
      <button type="button" class="dropdown-item dropdown-item-destructive action-select" id="dropdown-demo-delete" role="menuitem">
        <span class="dropdown-item-label">Delete</span>
      </button>
    </li>
  </ul>
</div>