patterns

OrgSwitcher

Topbar identity anchor for the active workspace. Sits to the LEFT of the breadcrumb trail — a workspace is a scope, not a path.

Renders an initial chip + truncated active-workspace name + a chevron. Click opens a labelled list of all the user's workspaces with an optional 'create new' footer. Use this for the topbar — NOT as the first breadcrumb item.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/org-switcher.json

Or import from the workspace package:

import { OrgSwitcher } from "@8maverik8/design";

import { OrgSwitcherItem, OrgSwitcherProps } from "@8maverik8/design";

Examples

Default

<OrgSwitcher
  organizations={[
    { id: "personal", name: "Личный воркспейс" },
    { id: "acme", name: "Acme Furniture" },
    { id: "studio", name: "OAPPS Studio" },
  ]}
  activeId="acme"
  onSelect={(id) => router.push(`/w/${id}`)}
  onCreate={() => setNewOrgOpen(true)}
  listLabel="Workspaces"
  createLabel="New workspace"
/>

Anatomy

Trigger`h-9` button: OrgAvatar + truncated name + ChevronsUpDown. Hover wash `bg-muted`.
Popover`w-72` card pinned to the chevron's left edge. Section label + scrollable list + optional create footer.
ItemOrgAvatar + name + check on the active one. Hover `bg-accent`.
FooterOptional create action. Shows only when `onCreate` is provided.

Guidelines

Render OrgSwitcher as a sibling of the breadcrumb trail, BEFORE the first `BreadcrumbSep`.Workspace is identity scope, not a path step. Putting it inside the breadcrumb chain misleads users about the hierarchy.
Use OrgSwitcher to switch projects, environments, or any non-scope concept.For project / page / round switching, use `BreadcrumbDropdown` inside the breadcrumb trail.
Drive selection through the URL when possible (`router.push(\"/w/\" + slug)`), not through cookie state.URL-based switching is share-able, multi-tab safe, and lets middleware enforce membership cheaply.