Action Menu

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

Customise it with AI

Open Action Menu in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.