Dropdown

A contextual menu that opens on trigger click with full keyboard navigation (Arrow keys, Escape).

Basic

Preview Code

<ac-dropdown>
<button slot="trigger" class="ac-button ac-button--secondary ac-button--md">
  Actions ▾
</button>
<div slot="menu">
  <button>Edit</button>
  <button>Duplicate</button>
  <hr>
  <button class="is-danger">Delete</button>
</div>
</ac-dropdown>

Copy

With icons

Preview Code

<ac-dropdown>
<button slot="trigger" class="ac-button ac-button--ghost ac-button--md ac-button--icon" aria-label="More options">
  ⋯
</button>
<div slot="menu">
  <button>⚙ Settings</button>
  <button>📋 Copy link</button>
  <button>🔗 Share</button>
</div>
</ac-dropdown>

Copy

Keyboard navigation

Key	Action
Enter / Space	Toggle open/close
ArrowDown	Open / next item
ArrowUp	Previous item
Home / End	First / last item
Escape	Close and return focus to trigger