Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<OrganizationSwitcher />

Organization Switcher Example

The <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.

Usage

/app/organization-switcher/[[...organization-switcher]]/page.[jsx/tsx]
import { OrganizationSwitcher } from "@clerk/nextjs"; export default function OrganizationSwitcherPage() { return ( <div> <OrganizationSwitcher /> </div> ); }
/pages/organization-switcher/[[...index]].[jsx/tsx]
import { OrganizationSwitcher } from "@clerk/nextjs"; export default function OrganizationSwitcherPage() { return ( <div> <OrganizationSwitcher /> </div> ); }

Props

All props below are optional.

NameTypeDescription
afterCreateOrganizationUrlstringFull URL or path to navigate after creating a new organization.
appearanceobjectControl the look and feel of the component.
createOrganizationUrlstringFull URL or path where the <CreateOrganization /> component is mounted.
organizationProfileUrlstringFull URL or path where the <OrganizationProfile /> component is mounted.
createOrganizationMode'modal' | 'navigation' Controls whether clicking the "Create organization" button will cause the <CreateOrganization /> component to open as a modal, or if the browser will navigate to the createOrganizationUrl where <CreateOrganization /> is mounted as a page.
Defaults to: "modal"
organizationProfileMode'modal' | 'navigation' Controls whether clicking the "Manage organization" button will cause the <OrganizationProfile /> component to open as a modal, or if the browser will navigate to the organizationProfileUrl where <OrganizationProfile /> is mounted as a page.
Defaults to: "modal"
afterLeaveOrganizationUrlstringFull URL or path to navigate to after the user leaves the currently active organization.
afterSwitchOrganizationUrlstringFull URL or path to navigate after a successful organization switch.
hidePersonalboolean By default, users can switch between organization and their personal account. This option controls whether <OrganizationSwitcher /> will include the user's personal account in the organization list. Setting this to false will hide the personal account entry, and users will only be able to switch between organizations.
Defaults to: true
defaultOpenbooleanControls the default state of the <OrganizationSwitcher />

What did you think of this content?

Clerk © 2023