# Action Menu

> A deployment action menu opened by a bolt icon button: a short fade-and-scale open from the trigger, one shared highlight plate that glides between rows with an accent halo, a detached marker pill and an Enter hint, a destructive row that re-tones the plate, and full WAI-ARIA keyboard navigation.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: menu
- Page: https://builder.atheros.ai/components/action-menu
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_action_menu/preview-f50533493b71.webp

## Features

- Menu-button pattern: `aria-haspopup`, `aria-expanded`, `aria-controls`, `role="menu"` / `role="menuitem"`
- Open: opacity plus `scale(0.97)` from the trigger corner, 200ms ease-out; close: 140ms ease-in
- Rows and rules fade in 14ms apart
- One shared hover plate moves between rows by `transform`; it carries a soft accent halo behind the row icon, a short detached accent pill at the leading edge, and an Enter glyph at the trailing edge
- The plate cross-fades to the error tone on the destructive row and follows keyboard focus too
- The plate rests on the first row as soon as the menu opens and stays on the last row when the pointer leaves, so the accent is always visible
- The active row's icon takes the text ink; icons never rotate, scale or shift
- Choosing a row stretches the accent across the plate, then the menu closes after 180ms
- The bolt trigger presses to `scale(0.97)` and its edge darkens while open; the icon stays still
- Dark theme: sheet darker than the canvas, hairline edge instead of a light shadow
- Backdrop: a quiet dot grid that fades toward the page edges — translucent over the system canvas, static
- Arrow, Home, End, Enter, Space, Escape and Tab handled; hover never steals focus
- Closes on any pointer press outside the trigger and the sheet, and when the window or host iframe loses focus
- Rows come from `MENU_ITEMS` in `js/data.js`
- `prefers-reduced-motion` disables all motion

## Accessibility

- **Menu button** — The trigger uses `aria-haspopup="menu"`, `aria-expanded` and `aria-controls`
- **Menu semantics** — The panel uses `role="menu"` and rows use `role="menuitem"`
- **Roving focus** — Rows use `tabindex="-1"` and receive focus as the keyboard moves the active index
- **Pointer hover** — Hover moves the plate without stealing focus, so no focus ring flashes under the pointer
- **Focus return** — Closing with Enter or Escape returns focus to the trigger
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Decorative layers** — The plate is `aria-hidden`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown` — Open the menu or move to the next item
- `ArrowUp` — Open the menu at the last item or move to the previous item
- `Home` — Move focus to the first item
- `End` — Move focus to the last item
- `Enter` — Choose the focused item
- `Escape` — Close the menu and return focus to the trigger
- `Tab` — Close the menu and move focus onward

## Common questions

**Which frameworks is Action Menu available in?**

Action Menu ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Action Menu dropdown menu component free?**

Action Menu is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Action Menu support dark mode?**

Yes. Action Menu ships light and dark themes, both drawn from the Triangulum design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Action Menu live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/action-menu

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt