<OrganizationSwitcher />

Organization switcher UI

A compact control for selecting the active organization, creating new organizations, and opening the Organization Profile — with automatic URL rewriting so routes remain scoped to the active org.

Quick start

/src/routes/+layout.svelte

If you use SSR for a no-flicker experience, pass initialData (see SSR & initialData below).

What it does

  • Switch active organization – changes the org context for the entire app.
  • Create organization – opens a modal for creating an org when needed.
  • Open Organization Profile – for owners/admins, opens a modal with settings.
  • URL rewriting – if the current path contains an org slug, it is replaced after switching (e.g. /my-org/products → /another-org/products).
  • Deep-link helper – /active-organization is replaced with the user’s current org slug, anywhere in the path.
  • Mobile back-handling – closing the profile dialog works with the browser back button and iOS back-swipe gestures without jank.

The component gracefully handles these states:

  1. organizations disabled (guard),
  2. unauthenticated without SSR (renders nothing),
  3. loading (skeleton),
  4. no orgs (CTA to create),
  5. has orgs (the full switcher).

URL behavior

Automatic slug replacement on switch

When the current route contains the active org slug, it’s replaced after you switch:

  • /acme/products/42 → /umbrella/products/42

The navigation uses goto(..., { replaceState: true }) to avoid cluttering history.

/active-organization shorthand

Anywhere in the path, /active-organization resolves to the current org:

  • /active-organization → /umbrella-company
  • /docs/active-organization/getting-started → /docs/umbrella-company/getting-started

Great for support docs, onboarding checklists, and shareable deep links.

Anatomy

Organization switcher anatomy

The switcher composes:

  • <OrganizationProfile /> – manage name, logo, members, roles (for owners/admins),
  • <CreateOrganization /> – create new orgs,
  • Popover/Dialog/Avatar primitives – present the menu and modals.

Provide server-fetched data so the switcher renders immediately (no auth flicker):

Enable SSR for organizations

Access & roles

  • Owner/Admin – see a Settings entry that opens <OrganizationProfile />.
  • Member – see the active org with a Leave control.
  • Permission checks are handled via your useRoles helper.

Props

  • popoverPlacement – defaults to 'bottom-end'.
  • initialData – pass server-loaded data for instant rendering.

Events & behaviors

  • Create Organization – opens a dialog; on success, the dialog closes and the list updates.

  • Open Organization Profile – pushes ?dialog=organization-profile to the URL so the browser back button and iOS back-swipe close the dialog reliably.

  • Switch Organization – calls the setActiveOrganization mutation, then:

    • replaces the slug in the current URL if present,
    • otherwise refreshes the current route, and
    • closes the popover.

Accessibility

The organization switcher is fully accessible via keyboard and touch. It uses standard HTML and ARIA attributes to make its UI components accessible to screen readers and other assistive technologies. The component is also responsive, adapting to different screen sizes and devices.

Troubleshooting

  • I don’t see anything while logged out Expected: we render nothing when unauthenticated and no SSR initialData is provided.
  • <OrganizationProfile /> – manage org settings, members, roles
  • <CreateOrganization /> – create a new organization
  • <LeaveOrganization /> – leave the current org (for members)