Back to changelog

Add custom menu items to <UserButton />

Category
React
Published

With our latest release, you can now add custom menu items to <UserButton /> component.

UserButton Customization

The <UserButton /> component now supports the following customizations:

  • Custom Links: Add external links to the menu using the <UserButton.Link /> component.
  • Custom Actions: Define custom actions that can trigger specific behaviors within your app using the <UserButton.Action /> component. This includes implementing custom logic with onClick handlers or opening the user profile modal to a specific page.

Here is an example of how to use our new React API for <UserButton /> customization:

<UserButton>
  <UserButton.MenuItems>
    <UserButton.Link label="Terms" labelIcon={<Icon />} href="/terms" />
    <UserButton.Action label="Help" labelIcon={<Icon />} open="help" />
    {/* Navigate to `/help` page when UserProfile opens as a modal. (Requires a custom page to have been set in `/help`) */}
    <UserButton.Action label="manageAccount" />
    <UserButton.Action label="Chat Modal" labelIcon={<Icon />} onClick={() => setOpenChat(true)} />
  </UserButton.MenuItems>
</UserButton>

For more information and implementation instructions, please refer to our documentation for <UserButton />.