`<OrganizationProfile />` customization

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

`<OrganizationProfile.Page />`

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 <OrganizationProfile.Page /> component.

Usage

<OrganizationProfile.Page /> can be rendered only on the client. For Next.js applications using App Router, the "use client"; directive must be added.

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from "@clerk/nextjs";
import { CustomProfilePage, CustomTerms } from "../components";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" labelIcon={<CustomIcon />} url="custom-page">
        <CustomProfilePage />
    </OrganizationProfile.Page>
    <OrganizationProfile.Page label="Terms" labelIcon={<CustomIcon />} url="terms">
        <CustomTerms />
    </OrganizationProfile.Page>
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs";
import { CustomProfilePage, CustomTerms } from "../components";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" labelIcon={<CustomIcon />} url="custom-page">
        <CustomProfilePage />
    </OrganizationProfile.Page>
    <OrganizationProfile.Page label="Terms" labelIcon={<CustomIcon />} url="terms">
        <CustomTerms />
    </OrganizationProfile.Page>
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
import { CustomProfilePage, CustomTerms } from "../components";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" labelIcon={<CustomIcon />} url="custom-page">
        <CustomProfilePage />
    </OrganizationProfile.Page>
    <OrganizationProfile.Page label="Terms" labelIcon={<CustomIcon />} url="terms">
        <CustomTerms />
    </OrganizationProfile.Page>
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

routes/organization/$.tsx
import { OrganizationProfile } from "@clerk/remix";
import { CustomProfilePage, CustomTerms } from "../components";
import { CustomIcon } from "../icons";
 
export default function OrganizationProfilePage() {
return (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" labelIcon={<CustomIcon />} url="custom-page">
        <CustomProfilePage />
    </OrganizationProfile.Page>
    <OrganizationProfile.Page label="Terms" labelIcon={<CustomIcon />} url="terms">
        <CustomTerms />
    </OrganizationProfile.Page>
  </OrganizationProfile>
);
}

Props

All props below 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.

`<OrganizationProfile.Link />`

You can add external links to the <OrganizationProfile /> navigation sidebar using the <OrganizationProfile.Link /> component.

Usage

<OrganizationProfile.Link /> can be rendered only on the client. For Next.js applications using App Router, the "use client"; directive must be added.

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from "@clerk/nextjs";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Link label="Homepage" labelIcon={<CustomIcon />} url="/home" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Link label="Homepage" labelIcon={<CustomIcon />} url="/home" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
import { CustomIcon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Link label="Homepage" labelIcon={<CustomIcon />} url="/home" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

routes/organization/$.tsx
import { OrganizationProfile } from "@clerk/remix";
import { CustomIcon } from "../icons";
 
export default function OrganizationProfilePage() {
return (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Link label="Homepage" labelIcon={<CustomIcon />} url="/home" />
  </OrganizationProfile>
);
}

Props

All props below 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.

Advanced use cases

Reordering default routes

If you want to reorder the default routes (Members and Settings) in the OrganizationProfile navigation sidebar, you can use the <OrganizationProfile.Page /> component with the label prop set to 'members' or 'settings'. This will target the existing default page and allow you to rearrange it.

Usage

<OrganizationProfile.Page /> and <OrganizationProfile.Link /> can be rendered only on the client. For Next.js applications that use App Router, the "use client"; directive needs to be used.

/app/organization-profile/[[...organization-profile]]/page.tsx
"use client";
 
import { OrganizationProfile } from "@clerk/nextjs";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
        <MyCustomPageContent />
    </OrganizationProfile.Page>
    <OrganizationProfile.Link label="Homepage" url="/home" labelIcon={<Icon />} />
    <OrganizationProfile.Page label="members" />
    <OrganizationProfile.Page label="settings" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
        <MyCustomPageContent />
    </OrganizationProfile.Page>
    <OrganizationProfile.Link label="Homepage" url="/home" labelIcon={<Icon />} />
    <OrganizationProfile.Page label="members" />
    <OrganizationProfile.Page label="settings" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

/organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const OrganizationProfilePage = () => (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
        <MyCustomPageContent />
    </OrganizationProfile.Page>
    <OrganizationProfile.Link label="Homepage" url="/home" labelIcon={<Icon />} />
    <OrganizationProfile.Page label="members" />
    <OrganizationProfile.Page label="settings" />
  </OrganizationProfile>
);
 
export default OrganizationProfilePage;

routes/organization/$.tsx
import { OrganizationProfile } from "@clerk/remix";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
export default function OrganizationProfilePage() {
return (
  <OrganizationProfile path="/organization-profile" routing="path">
    <OrganizationProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
        <MyCustomPageContent />
    </OrganizationProfile.Page>
    <OrganizationProfile.Link label="Homepage" url="/home" labelIcon={<Icon />} />
    <OrganizationProfile.Page label="members" />
    <OrganizationProfile.Page label="settings" />
  </OrganizationProfile>
);
}

The above example will result in the following order:

Custom Page
Homepage
Members
Settings

It's important to note that the first page in the list will be rendered under the root path / (its url will be ignored) and the Clerk pages will be rendered under the path /organitzation-members and /organization-settings. Also, the first item in the list cannot be a <OrganizationProfile.Link /> component.

Using custom pages with the `<OrganizationSwitcher />` component

If you are using the <OrganizationSwitcher /> component with the default props (where the OrganizationProfile opens as a modal), then you should also be providing these custom pages as children to the component (using the <OrganizationSwitcher.OrganizationProfilePage /> and <OrganizationSwitcher.OrganizationProfileLink /> components respectively).

Usage

<OrganizationSwitcher.OrganizationProfilePage /> and <OrganizationSwitcher.OrganizationProfileLink /> can be rendered only on the client. For Next.js applications using App Router, the "use client"; directive must be added.

/app/components/Header.tsx
"use client";
 
import { OrganizationSwitcher } from "@clerk/nextjs";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const Header = () => (
  <header>
    <OrganizationSwitcher afterSignOutUrl='/'>
      <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
          <MyCustomPageContent />
      </OrganizationSwitcher.OrganizationProfilePage>
      <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/home" labelIcon={<Icon />} />
      <OrganizationSwitcher.OrganizationProfilePage label="members" />
      <OrganizationSwitcher.OrganizationProfilePage label="settings" />
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

/pages/components/Header.tsx
import { OrganizationSwitcher } from "@clerk/nextjs";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const Header = () => (
  <header>
    <OrganizationSwitcher afterSignOutUrl='/'>
      <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
          <MyCustomPageContent />
      </OrganizationSwitcher.OrganizationProfilePage>
      <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/home" labelIcon={<Icon />} />
      <OrganizationSwitcher.OrganizationProfilePage label="members" />
      <OrganizationSwitcher.OrganizationProfilePage label="settings" />
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

/components/Header.tsx
import { OrganizationSwitcher } from "@clerk/clerk-react";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
const Header = () => (
  <header>
    <OrganizationSwitcher afterSignOutUrl='/'>
      <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
          <MyCustomPageContent />
      </OrganizationSwitcher.OrganizationProfilePage>
      <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/home" labelIcon={<Icon />} />
      <OrganizationSwitcher.OrganizationProfilePage label="members" />
      <OrganizationSwitcher.OrganizationProfilePage label="settings" />
    </OrganizationSwitcher>
  </header>
);
 
export default Header;

components/Header.tsx
import { OrganizationSwitcher } from "@clerk/remix";
import { MyCustomPageContent } from "../components";
import { CustomIcon, Icon } from "../icons";
 
export default function Header() {
return (
  <header>
    <OrganizationSwitcher afterSignOutUrl='/'>
      <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
          <MyCustomPageContent />
      </OrganizationSwitcher.OrganizationProfilePage>
      <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/home" labelIcon={<Icon />} />
      <OrganizationSwitcher.OrganizationProfilePage label="members" />
      <OrganizationSwitcher.OrganizationProfilePage label="settings" />
    </OrganizationSwitcher>
  </header>
    );
}

This repetition of the same property can be avoided when the user is using the organizationProfileMode='navigation' and organizationProfileUrl='<some url>' props on the <OrganizationSwitcher /> component and has implemented a dedicated page for the <OrganizationProfile /> component.

<OrganizationProfile.Page />

Usage

Props

<OrganizationProfile.Link />

Usage

Props

Advanced use cases

Reordering default routes

Usage

Using custom pages with the <OrganizationSwitcher /> component

Usage

`<OrganizationProfile.Page />`

`<OrganizationProfile.Link />`

Using custom pages with the `<OrganizationSwitcher />` component