# Add custom menu items to <UserButton />

### 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:

```tsx
<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](https://clerk.com/docs/components/customization/user-button.md)  for `<UserButton />`.