# Correspondence Dropdown Menu

> A porcelain-studio WAI-ARIA menu-button dropdown: a glazed sheet with a second slab peeking from beneath, uppercase running heads, double-rule dividers, stamped mono keycap hints, petrol glaze-wash row states and full keyboard navigation — themed as a studio bureau's correspondence menu.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: menu
- Page: https://builder.atheros.ai/components/dropdown
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dropdown/preview-c63314438ed4.webp

## 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

## 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 Correspondence Dropdown Menu available in?**

Correspondence Dropdown 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 Correspondence Dropdown Menu free?**

Yes. Correspondence Dropdown Menu is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Correspondence Dropdown Menu support dark mode?**

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

## Get the code

Preview Correspondence Dropdown 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/dropdown

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