# Dropdown
> Generated from dropdown.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, admin, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | string | `Menu` | The trigger button text |
| `items` | JSON list | `[]` | 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' | `bottomLeft` | Where the overlay opens relative to the trigger |
| `trigger` | 'click' | 'hover' | `click` | How the overlay is revealed |
| `select` | CustomEvent | `—` | Composed event on choosing an item, detail { key } |

## Visual standard (measured)
- Trigger: height 40 · radius 8 · white bg, 1px border #E3E3E3, SemiBold 600
- Trigger hover: border-hover #D3B4FF (motion-fast + ease-out)
- Caret: <aha-icon name="system-caret-down" size=16>, rotates 180° when open (motion-mid)
- Panel: elevated white, radius 8, 6 padding, min-width 200, soft shadow
- Placement: bottomLeft · bottomRight · topLeft · topRight — anchors the persistent panel
- Trigger mode: click (default) or hover
- Open motion: opacity + translateY on a persistent node (motion-mid + ease-out)
- Item: height 36 · radius 8 · 10px gap to a 16px leading icon · hover bg-hover #F7F7F7
- Danger item: color-error #F5222D text, error-tinted hover
- Divider: 1px split #F1F1F1 rule, role=separator
- Group title: 11px uppercase, text-tertiary #8A8A8A, non-interactive section header
- Disabled item: text-disabled #B5B5B5, not-allowed
- Submenu parent: item with children[]; aria-haspopup=menu, trailing <aha-icon name="system-caret-right" size=14>; brand-tinted (bg-accent #F9F5FF, color-primary #6A1EBB) while its flyout is open
- Flyout: second elevated panel adjacent to the parent (left:100%), opens on hover / ArrowRight / Enter; fades+scales on a persistent node (motion-mid + ease-out)
- Edge-collision flip: flyout measures on open; if it overflows the viewport it flips to open on the left (right:100%)
- Flyout keyboard: Up/Down within the flyout, ArrowLeft / Escape closes it back to the parent (focus returns to the parent row)

## When to use
- **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

A dropdown holds actions or navigation, not form values — use Select for a field. Keep the item list short; the panel closes on outside-click and Escape. Give each action a leading icon, rule off a destructive action with a divider and mark it danger. Reach for a submenu-parent (children[]) only when a group of related actions would otherwise crowd the top level — one level of flyout is plenty; deeper nesting is a menu smell. The overlay reuses the shared Menu item vocabulary rather than reinventing the row styling.