Embedded account pages
Add application-specific settings or help content inside the account-management interface.
Clerk · Component
UserProfile.Page
UserProfile.Page adds a custom page and navigation item inside Clerk's UserProfile UI. Supply page content, a label, an icon, and a URL segment.
- Since
- 2023-10-26
How it works
UserProfile.Page is a compound component placed inside UserProfile to add an application-owned page to its navigation. Provide the page content plus a label, icon, and URL segment; with path routing, the segment is appended to the UserProfile route.
Syntax
<UserProfile.Page label="..." url="..." labelIcon={<Icon />}>{children}</UserProfile.Page>Parameters
| Name | Type | Description |
|---|---|---|
children | React.ReactElement | React element rendered as the custom page body. |
label | string | Text shown for the custom page in the navigation sidenav. |
labelIcon | React.ReactElement | Icon displayed next to the navigation label. |
url | string | Path segment used to navigate to the custom page. |
Returns
A custom page entry and its content within the UserProfile component.
Key points
- Use UserProfile.Page to add application-specific content as a page within Clerk's UserProfile interface.
- The component's children are the React content displayed when the custom page is selected.
- label controls the navigation text shown for the custom page.
- labelIcon supplies the navigation icon beside the page label.
- url identifies the navigation path segment for the custom page.
Common mistakes
- UserProfile accepts only UserProfile.Page and UserProfile.Link as children for customization; arbitrary child components are not supported.
- The children, label, labelIcon, and url props are required.
- The url value is treated as a path segment under the UserProfile route when path routing is enabled.
Example: Add a custom UserProfile page
import { UserProfile } from '@clerk/nextjs'
function CustomSettings() {
return <p>Application settings</p>
}
export default function UserProfilePage() {
return (
<UserProfile>
<UserProfile.Page
label="Settings"
url="settings"
labelIcon={<span aria-hidden="true">⚙</span>}
>
<CustomSettings />
</UserProfile.Page>
</UserProfile>
)
}This renders a custom Settings page inside Clerk's UserProfile navigation.
When to use it
Feature-specific navigation
Expose a dedicated product feature through the UserProfile navigation.
Interview questions
QWhat is UserProfile.Page used for, and which props does it require?
UserProfile.Page is a compound component for adding a custom page to UserProfile's sidenav. Its children provide the page body, while label, labelIcon, and url define its navigation entry.
Follow-up: How is the custom page addressed with path routing? If UserProfile is rendered at /user, a page whose url is settings is reached at /user/settings.
QExplain the role of each required prop.
Use UserProfile.Page when the custom content belongs inside the dedicated UserProfile UI. The required label is shown in navigation, labelIcon supplies the adjacent icon, url supplies the route segment, and children render the content.
Follow-up: What alternative is available for an external destination? Use UserProfile.Link rather than UserProfile.Page.
QHow would you integrate a custom page in a Next.js UserProfile?
Place UserProfile.Page as a child of UserProfile and give it a React element as its children. In a framework with path routing, choose a URL segment that will be appended to the UserProfile path.
Follow-up: What must be configured for a UserButton-driven profile flow? The related guide indicates navigation mode and a UserProfile URL are needed for that setup.
Related
UserProfileUserProfile.LinkUserButton.UserProfilePageUserButton.UserProfileLink