`<OrganizationProfile />` customization

The <OrganizationProfile /> component supports the addition of custom pages and use of external links in the navigation sidebar.

There are two ways to render the <OrganizationProfile /> component:

As a modal
As a dedicated page

Both can be accessed when the user selects the <OrganizationSwitcher />, and then selects the Manage Organization option.

This guide includes examples for both use cases. You can select one of the following two tabs on the code examples to see the implementation for your preferred use case:

<OrganizationSwitcher /> tab: By default, the <OrganizationSwitcher /> sets organizationProfileMode='modal'. If you are using the default settings, then you should select this tab.
Dedicated page tab: If you do not want the <OrganizationProfile /> to open as a modal, then you should select this tab. For these examples, you need to set organizationProfileMode='navigation' and organizationProfileUrl='/organization-profile' on the <OrganizationSwitcher /> component.

For the sake of this guide, examples are written for Next.js App Router, but they are supported by any React meta framework, such as Remix or Gatsby.

Add a custom page to `<OrganizationProfile />`

Custom pages can be rendered inside the <OrganizationProfile /> component and provide a way to incorporate app-specific settings or additional functionality.

To add a custom page to the <OrganizationProfile /> component, use the <OrganizationSwitcher.OrganizationProfilePage /> component or the <OrganizationProfile.Page /> component, depending on your use case.

`<OrganizationProfile.Page />` Props

<OrganizationSwitcher.OrganizationProfilePage /> and <OrganizationProfile.Page /> accept the following props, all of which are required:

Name	Type	Description
`label`	`string`	The name that will be displayed in the navigation sidebar for the custom page.
`labelIcon`	`React.ReactElement`	An icon displayed next to the label in the navigation sidebar.
`url`	`string`	The path segment that will be used to navigate to the custom page. (e.g. if the `<OrganizationProfile />` component is rendered at `/organization`, then the custom page will be accessed at `/organization/{url}` when using path routing).
`children`	`React.ReactElement`	The components to be rendered as content inside the custom page.

Example

The following example demonstrates two ways that you can render content in the <OrganizationSwitcher.OrganizationProfilePage /> or <OrganizationProfile.Page /> component: as a component or as a direct child.

/app/components/Header.tsx
"use client";
 
import { OrganizationSwitcher } from "@clerk/nextjs";
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const CustomPage = () => {
  return (
    <div>
      <h1>Custom Organization Profile Page</h1>
      <p>This is the custom organization profile page</p>
    </div>
  );
};
 
const Header = () => (
  <header>
    <OrganizationSwitcher>
      {/* You can pass the content as a component */}
      <OrganizationSwitcher.OrganizationProfilePage
        label="Custom Page"
        url="custom"
        labelIcon={<DotIcon />}
      >
        <CustomPage />
      </OrganizationSwitcher.OrganizationProfilePage>
 
      {/* You can also pass the content as direct children */}
      <OrganizationSwitcher.OrganizationProfilePage
        label="Terms"
        labelIcon={<DotIcon />}
        url="terms"
      >
        <div>
          <h1>Custom Terms Page</h1>
          <p>This is the custom terms page</p>
        </div>
      </OrganizationSwitcher.OrganizationProfilePage>
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from '@clerk/nextjs';
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const CustomPage = () => {
  return (
    <div>
      <h1>Custom Organization Profile Page</h1>
      <p>This is the custom organization profile page</p>
    </div>
  );
};
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    {/* You can pass the content as a component */}
    <OrganizationProfile.Page
      label="Custom Page"
      labelIcon={<DotIcon />}
      url="custom-page"
    >
      <CustomPage />
    </OrganizationProfile.Page>
 
    {/* You can also pass the content as direct children */}
    <OrganizationProfile.Page
      label="Terms"
      labelIcon={<DotIcon />}
      url="terms"
    >
      <div>
        <h1>Custom Terms Page</h1>
        <p>This is the custom terms page</p>
      </div>
    </OrganizationProfile.Page>
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

Add a custom link to `<OrganizationProfile />`

You can add external links to the <OrganizationProfile /> navigation sidebar using the <OrganizationSwitcher.OrganizationProfileLink /> component or the <OrganizationProfile.Link /> component, depending on your use case.

Props

<OrganizationSwitcher.OrganizationProfileLink /> and <OrganizationProfile.Link /> accept the following props, all of which are required:

Name	Type	Description
`label`	`string`	The name that will be displayed in the navigation sidebar for the link.
`labelIcon`	`React.ReactElement`	An icon displayed next to the label in the navigation sidebar.
`url`	`string`	The absolute or relative url to navigate to.

Example

The following example adds a link to the homepage in the navigation sidebar of the <OrganizationProfile /> component.

/app/components/Header.tsx
"use client";
 
import { OrganizationSwitcher } from "@clerk/nextjs";
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const Header = () => (
  <header>
    <OrganizationSwitcher>
      <OrganizationSwitcher.OrganizationProfileLink
        label="Homepage"
        url="/"
        labelIcon={<DotIcon />}
      />
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from "@clerk/nextjs";
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Link
      label="Homepage"
      labelIcon={<DotIcon />}
      url="/"
    />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

Reordering default routes

If you want to reorder the default routes, Members and Settings, set the label prop to 'members' or 'settings'. This will target the existing default page and allow you to rearrange it.

Note that when reordering default routes, the first item in the navigation sidebar cannot be a <OrganizationSwitcher.OrganizationProfileLink /> or <OrganizationProfile.Link /> component.

/app/components/Header.tsx
"use client";
 
import { OrganizationSwitcher } from "@clerk/nextjs";
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const CustomPage = () => {
  return (
    <div>
      <h1>Custom Organization Profile Page</h1>
      <p>This is the custom organization profile page</p>
    </div>
  );
};
 
const Header = () => (
  <header>
    <OrganizationSwitcher>
      <OrganizationSwitcher.OrganizationProfilePage
        label="Custom Page"
        url="custom"
        labelIcon={<DotIcon />}
      >
        <CustomPage />
      </OrganizationSwitcher.OrganizationProfilePage>
      <OrganizationSwitcher.OrganizationProfileLink
        label="Homepage"
        url="/"
        labelIcon={<DotIcon />}
      />
      <OrganizationSwitcher.OrganizationProfilePage label="members" />
      <OrganizationSwitcher.OrganizationProfilePage label="settings" />
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

The first page in the list will always be rendered under the root path defined with the path prop. Its url prop will be ignored.

In the following example, path is set to /organization-profile, so the <CustomPage /> is rendered under the /organization-profile path.

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from "@clerk/nextjs";
 
const DotIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      fill="currentColor"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
    </svg>
  )
}
 
const CustomPage = () => {
  return (
    <div>
      <h1>Custom Organization Profile Page</h1>
      <p>This is the custom organization profile page</p>
    </div>
  );
};
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page
      label="Custom Page"
      url="custom"
      labelIcon={<DotIcon />}
    >
      <CustomPage />
    </OrganizationProfile.Page>
    <OrganizationProfile.Link
      label="Homepage"
      url="/"
      labelIcon={<DotIcon />}
    />
    <OrganizationProfile.Page label="members" />
    <OrganizationProfile.Page label="general" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

With the above example, the <OrganizationProfile /> navigation sidebar will be in the following order:

Custom Page
Homepage
Members
Settings

Last updated on March 7, 2024

Add a custom page to <OrganizationProfile />

<OrganizationProfile.Page /> Props

Example

Add a custom link to <OrganizationProfile />

Props

Example

Reordering default routes

Add a custom page to `<OrganizationProfile />`

`<OrganizationProfile.Page />` Props

Add a custom link to `<OrganizationProfile />`