# Profile Dropdown Menu

> A profile dropdown led by an identity header for the signed-in account, with quick actions and soft key-chip shortcut hints, a What's new discovery item, a switch-account list of the other accounts with a hover switch arrow, a dark mode toggle row grouped above the error-weighted sign-out action — fully token-driven and design-system agnostic.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: account-switcher, dark-mode, responsive, dropdown, menu, profile
- Page: https://builder.atheros.ai/components/dropdown-menu
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dropdown_menu/preview-af14d27512fe.webp

## Features

- Profile trigger button in a fixed header bar that opens the dropdown panel; every bar item sits in a 32px slot on one 36px rhythm, with an even 8px inset
- Animated unread badge on the messages icon: pops in once, then a soft ring pulse every 2.8s (static under reduced motion)
- Hover plate: one highlight glides between rows (240ms expo-out); each row's ink lights as the plate arrives, delayed by distance; red-tinted on sign-out; follows keyboard focus, never lit by a click-open
- Identity header menuitem: current account's avatar, name, email, and labeled presence dot
- Quick action menu items with Tabler icons and keycap shortcut hints (one key per character)
- What's new discovery item (Tabler speakerphone) with a green dot + label marker
- Switch-account list of the other accounts only, with a trailing switch arrow revealed on hover/focus
- Account switching updates the identity header and trigger avatar in place and keeps the menu open
- Integral Dark Mode toggle row with a switch and moon/sun icon swap, grouped above sign-out
- Sign out action row with an error-tinted destructive hover
- Staggered, interruption-safe menu-open entrance (12ms per row)
- Roving keyboard navigation (Arrow keys, Home, End, Enter/Space, Escape)
- Accessible: ARIA roles, focus-visible indicators, reduced-motion support
- Responsive: panel spans the viewport gutters on mobile (< 480px)

## Accessibility

- **Trigger button** — `aria-haspopup="true"`, `aria-expanded` toggled
- **Menu container** — `role="menu"` on the action list, `aria-label` on the `<nav>`
- **Menu items** — `role="menuitem"` with `tabindex="-1"`
- **Account radiogroup** — `role="radiogroup"` with `aria-label`, items have `role="radio"` and `aria-checked`
- **Theme toggle** — `role="switch"` with `aria-checked` on the toggle row, kept in sync by `updateThemeToggles()`; the inner checkbox is `aria-hidden` so only one switch is exposed
- **Roving focus** — Arrow keys, Home, and End move focus across menu items, the toggle row, accounts, and sign-out
- **Focus restoration** — `switchAccount()` re-renders and returns focus to the selected account row
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive rows
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Escape key** — Closes dropdown and returns focus to trigger
- **Unread badge** — Visual count is `aria-hidden`; an `sr-only` "3 unread messages" carries it
- **Keycaps** — Nested `<kbd>` per key, so the combination reads as one shortcut

## Keyboard shortcuts

- `ArrowDown` — Focus next row (wraps)
- `ArrowUp` — Focus previous row (wraps)
- `Home` — Focus first row
- `End` — Focus last row
- `Enter / Space` — Select the focused account or flip the focused Dark Mode toggle
- `Escape` — Close dropdown, return focus to trigger

## Common questions

**Which frameworks is Profile Dropdown Menu available in?**

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

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

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

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

## Get the code

Preview Profile 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-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