Navigation

WorkspaceSwitcher

Which workspace is open, always in view, and the way to switch to another.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`items`Required	`WorkspaceSwitcherItem[]`
`value`	`string`
`onChange`	`(key: string) => void`
`onNew`	`() => void`	Adds "New workspace" after the list.
`newHref`	`string`
`newLabel`	`string`
`onSettings`	`() => void`	Adds "Workspace settings" for the open workspace, at the top of the second group.
`settingsHref`	`string`
`settingsLabel`	`string`
`layout`	`'block' \| 'pill'`	block (default): name and role, full width, for the side navigation. pill: a glass capsule with the name, for phone pages.
`collapsed`	`boolean`	The workspace initial only, for a collapsed side navigation; the name shows as a tooltip and stays for screen readers.
`label`	`string`	Names the button for screen readers. Default "Switch workspace".
`className`	`string`

Guidelines

Which workspace is open, always in view, and the way to switch to another. It is a separate thing from you (that is AccountMenu), the way Slack, Linear and Notion keep the workspace at the top left and the person at the top right.

Provide: items ({ key, name, detail }, where detail is your role there: "Owner", "Manager", "Assistant", "Viewer"), value (the open workspace), onChange, and onNew or newHref to add "New workspace".

One per screen. On desktop it sits at the top of the side navigation, under the logo. The button shows the workspace initial on an accent-subtle tile, the name in bold and your role under it, so you always know where you are.
collapsed (collapsed side navigation): the initial tile only. The name and role show as a tooltip and stay in the button's label for screen readers.
layout: pill on phones, where there is no side navigation: a glass capsule at the top left of the page with the initial and the name.
The menu opens below the button in glass, like every menu. It lists every workspace (icon building, role as the detail); the open one is checked and bold. Then Workspace settings (settings) and New workspace (add).
Keyboard: Enter, Space or the arrow keys open it; arrows move, Home and End jump, Enter chooses, Escape closes and returns focus to the button, Tab closes. Workspaces are menuitemradio with aria-checked.
Switching reloads from Home, so no page is left showing something from the other workspace.
The well behind the button is glass-track with glass-track-edge, so it reads as a control without a card or a border accent.

No chooser arrows: the workspace's mark and name are the button, and the menu opens on click, Enter, Space or the arrow keys.
onSettings (or settingsHref) adds Workspace settings for the open workspace, above New workspace. Each item's src shows the workspace's logo in the mark instead of its initial.