Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<OrganizationSwitcher /> component

Organization Switcher Example

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

<OrganizationSwitcher /> properties

All props below are optional.

NameTypeDescription
afterCreateOrganizationUrlstringFull URL or path to navigate to 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.
afterSelectOrganizationUrlstringFull URL or path to navigate to 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.
For example: {appearance: {...}}

Usage with frameworks

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

Usage with JavaScript

The following methods available on an instance of the Clerk class are used to render and control the <OrganizationSwitcher /> component:

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

mountOrganizationSwitcher()

Render the <OrganizationSwitcher /> component to an HTML <div> element.

function mountOrganizationSwitcher(node: HTMLDivElement, props?: OrganizationSwitcherProps): void;

mountOrganizationSwitcher() params

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <OrganizationSwitcher /> component
props?OrganizationSwitcherPropsThe properties to pass to the <OrganizationSwitcher /> component

mountOrganizationSwitcher() usage

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_key}}'); await clerk.load(); document.getElementById("app").innerHTML = ` <div id="organization-switcher"></div> `; const orgSwitcherDiv = document.getElementById("organization-switcher"); clerk.mountOrganizationSwitcher(orgSwitcherDiv);
index.html
<!-- Add a <div id="organization-switcher"> element to your HTML --> <div id="organization-switcher"></div> <!-- Initialize Clerk with your Clerk Publishable key and Frontend API URL --> <script async crossorigin="anonymous" data-clerk-publishable-key="{{pub_key}}" src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js" type="text/javascript" ></script> <script> window.addEventListener("load", async function () { await Clerk.load(); const orgSwitcherDiv = document.getElementById('organization-switcher'); Clerk.mountOrganizationSwitcher(orgSwitcherDiv); }); </script>

unmountOrganizationSwitcher()

Unmount and run cleanup on an existing <OrganizationSwitcher /> component instance.

function unmountOrganizationSwitcher(node: HTMLDivElement): void;

unmountOrganizationSwitcher() params

NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The container <div> element with a rendered <OrganizationSwitcher /> component instance

unmountOrganizationSwitcher() usage

main.js
import Clerk from '@clerk/clerk-js'; // Initialize Clerk with your Clerk publishable key const clerk = new Clerk('{{pub_key}}'); await clerk.load(); document.getElementById('app').innerHTML = ` <div id="organization-switcher"></div> ` const orgSwitcherDiv = document.getElementById('organization-switcher'); clerk.mountOrganizationSwitcher(orgSwitcherDiv); // ... clerk.unmountOrganizationSwitcher(orgSwitcherDiv);
index.html
<!-- Add a <div id="organization-switcher"> element to your HTML --> <div id="organization-switcher"></div> <!-- Initialize Clerk with your Clerk Publishable key and Frontend API URL --> <script async crossorigin="anonymous" data-clerk-publishable-key="{{pub_key}}" src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js" type="text/javascript" ></script> <script> window.addEventListener("load", async function () { await Clerk.load(); const orgSwitcherDiv = document.getElementById('organization-switcher'); Clerk.mountOrganizationSwitcher(orgSwitcherDiv); // ... Clerk.unmountOrganizationSwitcher(orgSwitcherDiv); }); </script>

Customization

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

Last updated on March 26, 2024

What did you think of this content?

Clerk © 2024