Correspondence Dropdown Menu

Features

• Menu-button pattern with aria-haspopup, aria-expanded and aria-controls
• Atelier identity — porcelain ground, glazed-white sheet, graphite ink, petrol glaze accent, kiln-red danger
• Stacked-sheet elevation: a second offset slab rendered via layered box-shadow plates, not blur
• Running heads — uppercase letterspaced group labels with a trailing hairline rule
• Double-rule section dividers (two hairlines, 1px apart)
• Keyboard shortcut hints as stamped keycaps — mono face, hairline border with a 2px bottom edge
• Glaze-wash row states: hovered/roved items pool a translucent petrol wash across the whole row while the leading icon dips into full glaze and the keycap inks up — no left-border ticks
• Springy open with slight overshoot from the trigger, instant-ish close
• Full roving keyboard navigation with Arrow, Home, End, Enter, Escape and Tab
• Outside-click close with focus return to the trigger
• Data-driven menu items rendered from a MENU_ITEMS config in js/data.js
• Responsive menu that adapts down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Menu button

The trigger uses aria-haspopup="menu", aria-expanded and aria-controls

Menu semantics

The panel uses role="menu" and items use role="menuitem"

Roving focus

Items use tabindex="-1" and receive focus as the active index moves

Focus return

Closing with Enter or Escape returns focus to the trigger

Focus indicators

:focus-visible with --ring outline on all interactive elements

Contrast

Petrol accent holds ≥3:1 on both porcelain and charcoal surfaces; labels ≥4.5:1

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Correspondence Dropdown 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.