# Account Switcher

> A multi-account switcher dropdown: an avatar trigger opens a panel with the signed-in account, a switch-account list rendered from data with photo avatars on accent discs and an active check, plus add-account, settings and sign-out actions, full keyboard navigation and outside-click close.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: avatar
- Page: https://builder.atheros.ai/components/account-switcher
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_account_switcher/preview-5db7f36a496b.webp

## Features

- Menu-button pattern with `aria-haspopup`, `aria-expanded` and `aria-controls`
- Signed-in account header with photo avatar, name, email and an Active badge
- Switch-account list rendered from an `ACCOUNTS` array — clicking another account really switches the active state and updates the trigger avatar and name
- `role="menuitemradio"` account rows with `aria-checked` and a steel-blue check on the active account
- Local WebP photo avatars layered over the per-account accent discs (steel-blue, indigo, teal, glacier-cyan) with an accent ring overlay
- Automatic fallback to the tinted initials disc when a photo fails to load
- Real add-account affordance that appends the next account from a pool and disables itself when the pool is empty
- Full roving keyboard navigation with Arrow, Home, End, Enter, Escape and Tab
- Fade-and-translate reveal of the menu plus a spring pop on the trigger avatar when switching
- Outside-click close with focus return to the trigger
- 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"`, actions use `role="menuitem"`
- **Radio semantics** — Account rows use `role="menuitemradio"` with `aria-checked` inside a labelled `role="group"`
- **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
- **Live trigger label** — The trigger `aria-label` names the signed-in account and updates on switch
- **Disabled state** — The add-account item flips to `aria-disabled="true"` when the pool is empty
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **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` — Activate the focused item (switch, add or close)
- `Escape` — Close the menu and return focus to the trigger
- `Tab` — Close the menu and move focus onward

## Common questions

**Which frameworks is Account Switcher available in?**

Account Switcher 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 Account Switcher dropdown menu component free?**

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

**Does Account Switcher support dark mode?**

Yes. Account Switcher ships light and dark themes, both drawn from the Vector design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Account Switcher 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/account-switcher

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