Account Switcher — Free HTML CSS JS Workspace Menu

Any app that supports multiple workspaces, organisations, or accounts — Slack, Notion, Vercel, Linear, GitHub — needs a switcher: a trigger showing the current account, and a dropdown to jump between the others. This component is exactly that, built in HTML, CSS, and vanilla JavaScript: a trigger button with the active workspace's avatar, name, and plan; a dropdown listing all workspaces with a checkmark on the current one; and create-workspace and sign-out actions below a divider. It handles the disclosure animation, switching, click-outside and Escape close, and ARIA wiring.

The trigger that mirrors the selection

The trigger button shows the active workspace: a gradient avatar with its initial, the workspace name (truncated with ellipsis so a long name never breaks the layout), the plan label beneath it, and a chevron that rotates 180 degrees when the menu opens. When you switch workspaces, switchTo() updates all of these in place — the avatar's letter and gradient, the name, and the plan — so the trigger always reflects the current context at a glance, the way the top-left switcher does in the apps users already know.

Data-driven workspace list

The dropdown is generated from a WORKSPACES array of { name, plan, initial, color } objects. buildList() renders each as a menu item with its gradient avatar, name, plan, and a checkmark that is visible only on the active workspace (toggled by an .active class with opacity). Rebuilding the list on every switch keeps the checkmark in sync with the selection with no per-item bookkeeping. Adding a workspace is one array entry.

The disclosure animation

The menu starts hidden with opacity: 0, transform: translateY(-8px) scale(0.98), and pointer-events: none. Adding the open class transitions it to full opacity and scale(1) with the transform origin at the top, so it grows downward out of the trigger — the standard dropdown reveal. Because pointer-events are disabled while closed, the invisible menu never intercepts clicks meant for the page behind it.

Robust close behaviour

A dropdown must close when you click elsewhere or press Escape. The outside-click handler uses e.composedPath().includes(...) rather than e.target.closest(), checking whether the click landed inside the menu or the trigger. composedPath() captures the full event path at dispatch time, which is more reliable than closest() when list items are re-rendered (the active item's DOM node is replaced on switch, which can break closest()-based checks). The trigger's own click uses stopPropagation() so it toggles the menu without immediately triggering the document handler that would close it. Escape closes it from anywhere.

Accessible menu semantics

The trigger carries aria-haspopup="true" and aria-expanded that flips with the open state, the dropdown has role="menu", and each workspace and action has role="menuitem". Every interactive element is a real <button>, so the whole switcher is keyboard-focusable and operable out of the box, and screen readers announce it as a menu with the correct expanded state.

Customisation

Replace the WORKSPACES array with your real accounts, use <img> avatars in place of the gradient initials if you have logos, and wire switchTo() to actually change the active workspace in your app (navigate, set a cookie, or call an API). Point the "Create workspace" and "Sign out" actions at your routes. Swap the #6366f1 accent used by the checkmark and hover states for your brand. The whole component is 280px wide by default and sits in a relatively positioned wrapper, so it drops neatly into a sidebar or top bar.