## Dropdown
A trigger button that reveals a floating overlay of actions — with leading icons, dividers, disabled rows and a red danger action.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-dropdown> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, admin, settings.
Props:
- label: string, default Menu. The trigger button text
- items: JSON list, default []. Rows. Leaf {key,label,icon?,disabled?,danger?}; submenu-parent {key,label,icon?,children:[…]} → adjacent flyout; rule {type:'divider'}; section {type:'group',label,children:[]}
- placement: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight', default bottomLeft. Where the overlay opens relative to the trigger
- trigger: 'click' | 'hover', default click. How the overlay is revealed
- select: CustomEvent, default —. Composed event on choosing an item, detail { key }
Tokens: border, border-hover, bg-container, bg-elevated, bg-hover, bg-accent, text-default, text-tertiary, text-disabled, icon-muted, color-error, border-focus, split, radius-default.
Use when: Dropdown (a set of actions or options should sit behind a trigger to save space); Menu (the same list belongs inline, always visible — not behind a trigger); Select (the control picks a single value for a form field, not fires an action).