Workspace Switcher

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

Customise it with AI

Open Workspace Switcher 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.