Dropdown
A contextual menu that opens on trigger click with full keyboard navigation (Arrow keys, Escape).
<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> With icons
Section titled “With icons”<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> Keyboard navigation
Section titled “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 |