Terms and policies
Add organization-specific legal or policy content inside the profile UI.
Clerk · Component
OrganizationProfile.Page
OrganizationProfile.Page adds a custom page to Clerk's OrganizationProfile navigation. Configure its label, URL segment, optional icon, and child content.
How it works
OrganizationProfile.Page adds a custom page to the OrganizationProfile side navigation. Give it a label, URL segment, and optional icon, then render the page's content as its child.
Syntax
<OrganizationProfile.Page label="Custom Page" url="custom-page" labelIcon={<Icon />}>{children}</OrganizationProfile.Page>Parameters
| Name | Type | Description |
|---|---|---|
label | string | Text displayed for the custom navigation item. |
url | string | URL segment used for the custom page. |
labelIcon | ReactNode | Optional icon displayed with the navigation label. |
children | ReactNode | Rendered content for the custom page. |
Returns
A React element that registers and renders a custom OrganizationProfile navigation page.
Key points
- OrganizationProfile.Page extends the profile's side navigation with an application-defined page.
- The component has an equivalent OrganizationSwitcher.OrganizationProfilePage form for adding a custom page through the switcher.
- Use OrganizationProfile.Link instead when the navigation item should point to an external destination.
- A custom entry specifies user-facing label text, an optional icon, and a URL segment.
- Custom navigation configuration can be combined with reordering the profile's default routes.
Common mistakes
- Use OrganizationProfile.Page or OrganizationSwitcher.OrganizationProfilePage as children; arbitrary child components are not accepted.
- When embedding a dedicated profile page instead of using the default modal, configure the surrounding OrganizationSwitcher for navigation and provide an organization profile URL.
Example: Add a custom OrganizationProfile page
import { OrganizationProfile } from '@clerk/nextjs'
export default function OrganizationProfilePage() {
return (
<OrganizationProfile path="/organization-profile" routing="path">
<OrganizationProfile.Page label="Terms" labelIcon={<span>•</span>} url="terms">
<div>
<h1>Custom Terms Page</h1>
<p>Organization terms and conditions.</p>
</div>
</OrganizationProfile.Page>
</OrganizationProfile>
)
}Mounts an OrganizationProfile and adds a custom Terms page to its navigation.
When to use it
Custom management screen
Expose organization administration tools alongside Clerk's built-in profile routes.
Branded profile navigation
Provide a branded navigation item within the organization settings experience.
Interview questions
QWhat does OrganizationProfile.Page provide?
OrganizationProfile.Page is a child component that contributes a custom page to OrganizationProfile's side navigation. Its content renders when the user selects the corresponding navigation item.
Follow-up: How would you expose the profile as a dedicated route rather than a modal? Configure organizationProfileMode="navigation" and organizationProfileUrl on OrganizationSwitcher, then mount OrganizationProfile on the matching route.
QWhich props are used to define a custom page?
Set label to the navigation text and url to the page's route segment. A labelIcon can optionally provide the navigation icon, while the component's children define the page content.
Follow-up: What changes when the page uses a dedicated route? The parent OrganizationProfile can use path and routing="path" so the selected custom page is represented in the URL.
QHow does Page differ from Link?
OrganizationProfile supports custom pages and external links in its sidenav. OrganizationProfile.Page is for an in-profile page, while OrganizationProfile.Link is for an external destination.
Follow-up: Which default navigation entries can be reordered? The documentation identifies Members and Settings as default routes that can be reordered.
Related
OrganizationProfileOrganizationProfile.LinkOrganizationSwitcher.OrganizationProfilePageOrganizationSwitcherorganizationProfileModeorganizationProfileUrl