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> ); }

Properties

All props below are optional.

NameTypeDescription
afterCreateOrganizationUrlstringFull URL or path to navigate after creating a new organization.
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
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.
hidePersonalbooleanBy default, users can switch between organizations and their personal workspace. This option controls whether <OrganizationSwitcher /> will include the user's personal workspace in the organization list. Setting this to true will hide the personal workspace entry, and allow users to switch only between organizations.
Defaults to: false.
defaultOpenbooleanControls the default state of the <OrganizationSwitcher /> component.
organizationProfilePropsobjectSpecify options for the underlying <OrganizationProfile /> component.
e.g. {appearance: {...}}

Customization

To learn about how to customize Clerk components, see the customization documentation.

Last updated on November 21, 2023

What did you think of this content?

Clerk © 2024