# Workspace Switcher

> A Stripe-styled workspace switcher: a gradient logo-tile trigger opens a smooth-height reveal panel with the current-workspace header, a real-photo member facepile, a radio list that live-switches the trigger, a signed-in account row, plus create, settings and sign-out actions and keyboard.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Page: https://builder.atheros.ai/components/workspace-switcher
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_workspace_switcher/preview-219ec93073c3.webp

## Features

- Menu-button pattern with `aria-haspopup`, `aria-expanded` and `aria-controls`
- Two-line, fixed-width trigger that surfaces the active workspace — logo tile, name and a plan · member-count subtitle — with a chevron that rotates 180° on open; the fixed text column keeps the trigger the same size across workspaces so switching never shifts the layout
- Current-workspace header with a logo tile, name, plan and member count, plus a Current badge
- Member facepile of real Unsplash portrait photos with a gentle distance-falloff spread on header hover and a `+N` overflow chip
- Signed-in account row with a real portrait avatar, name and email above the sign-out action
- Switch-workspace list rendered from a `WORKSPACES` array — choosing another workspace patches the radio rows in place (the check fades in with a soft scale) and cross-fades both the trigger tile and text to the newly chosen workspace
- `role="menuitemradio"` workspace rows with `aria-checked`, an indigo check, a primary ring around the active workspace avatar and a persistent leading accent bar so the current workspace is unmistakable
- Primary leading accent bar that scales in from center on every hovered or roving-focus row (danger-tinted on sign-out)
- Brand-mark logo tiles — each of the three workspaces pairs an official Tabler glyph (sparkles, wind, compass) with its own duotone accent gradient and inner sheen, held constant across light and dark like a real product logo
- Create-workspace, settings and destructive sign-out actions rendered as `role="menuitem"` rows from data
- Full roving keyboard navigation with Arrow, Home, End, Enter, Escape and Tab
- Transitions.dev-style smooth-height panel reveal — `grid-template-rows: 0fr → 1fr` with no JS height measuring — while the inner wrapper fades in and de-blurs on a single `cubic-bezier(0.22, 1, 0.36, 1)` ease and the shadow grows into a lift
- Hover highlights the row without stealing DOM focus (no scroll-jump), and clears when the pointer leaves the panel — no sticky active row
- 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** — Workspace 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 current workspace and updates on switch
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Avatar alt text** — Every facepile and account `<img>` carries the member's real name as `alt`
- **Contrast** — Indigo accent holds ≥3:1 on both the cool-blue paper and the night surface; 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` — Activate the focused item (switch 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 Workspace Switcher available in?**

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

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

**Does Workspace Switcher support dark mode?**

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

## Get the code

Preview Workspace 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/workspace-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