> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: f92fd2b7-bc35-43b2-a2f2-013ee381a63b
---

# PageHeader

> Learn about the PageHeader component and action buttons for app pages.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

The `PageHeader` component and its sub-components are used to add action links to the header area of app pages. These components allow you to create primary and secondary actions that users can take within your app.

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/app-home-header-row-buttons.png" alt="Screenshot of the app page header featuring action buttons" />
</Frame>

```tsx theme={null}
import { PageHeader } from "@hubspot/ui-extensions/pages";

<PageHeader>
  <PageHeader.PrimaryAction>
    <PageHeader.PageLink to="/">Home</PageHeader.PageLink>
  </PageHeader.PrimaryAction>
  <PageHeader.SecondaryActions>
    <PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>
    <PageHeader.PageLink to="/support">Support</PageHeader.PageLink>
    <PageHeader.Link href="https://example.com">External Link</PageHeader.Link>
  </PageHeader.SecondaryActions>
</PageHeader>
```

<Warning>
  To use these components, you'll need to be on version `0.13.0` or later of the `ui-extensions` NPM package. You can check your current version by running `npm list` or `npm list -g`, and install the latest version by running `npm i @hubspot/ui-extensions`.
</Warning>

## PageHeader

The `PageHeader` component is the main wrapper component for primary and secondary header actions. It's recommended to only include one instance of `PageHeader` in your app, and to avoid adding/removing it dynamically which can result in unexpected behavior.

Only `PageHeader.PrimaryAction` and `PageHeader.SecondaryActions` are supported as children.

```tsx theme={null}
import { PageHeader } from "@hubspot/ui-extensions/pages";

<PageHeader>
  <PageHeader.PrimaryAction>
    <PageHeader.PageLink to="/">Home</PageHeader.PageLink>
  </PageHeader.PrimaryAction>
</PageHeader>
```

### Props

<ComponentProps autoGenerated componentName="PageHeader">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## PageHeader.PrimaryAction

The `PageHeader.PrimaryAction` component is a wrapper for the primary action in the page header. It can contain a `PageHeader.PageLink` component (for navigating to another page in your app) or a `PageHeader.Link` component (for URLs outside your app pages). The primary action is displayed as a button.

`PageHeader` can contain only one instance of `PageHeader.PrimaryAction`.

<Frame>
  <img style={{maxWidth: '150px' }} src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/primary-button-example.png" alt="Screenshot of a primary header action button" />
</Frame>

```tsx theme={null}
import { PageHeader } from '@hubspot/ui-extensions/pages';

// Primary action linking to another app page
<PageHeader.PrimaryAction>
  <PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>
</PageHeader.PrimaryAction>

// Primary action as external URL
<PageHeader.PrimaryAction>
  <PageHeader.Link href="https://www.hubspot.com">View Details</PageHeader.Link>
</PageHeader.PrimaryAction>
```

<Warning>
  `PageHeader.PrimaryAction` can only contain `PageHeader.PageLink` or `PageHeader.Link` components. No other component types are supported.
</Warning>

### Props

<ComponentProps autoGenerated componentName="PageHeaderPrimaryAction">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>The content to render inside the primary action container.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## PageHeader.SecondaryActions

The `PageHeader.SecondaryActions` component is a wrapper for secondary actions that appear in an *Actions* dropdown menu next to the primary action. It can contain multiple `PageHeader.PageLink` components (for navigating to other pages in your app) or `PageHeader.Link` components (for URLs outside your app pages).

<Frame>
  <img style={{maxWidth: '300px' }} src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/app-home-advanced-secondary-buttons.png" alt="Screenshot of several secondary action buttons" />
</Frame>

```tsx theme={null}

import { PageHeader } from "@hubspot/ui-extensions/pages";
import { hubspot } from "@hubspot/ui-extensions";

hubspot.extend<"pages">(() => {
  return <AdvancedHeaderActions />;
});

function AdvancedHeaderActions() {
  return (
    <PageHeader>
      <PageHeader.PrimaryAction>
        <PageHeader.PageLink to="/home">Home</PageHeader.PageLink>
      </PageHeader.PrimaryAction>
      <PageHeader.SecondaryActions>
        <PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>
        <PageHeader.PageLink to="/support">Support</PageHeader.PageLink>
        <PageHeader.Link href="https://example.com">External Resource</PageHeader.Link>
      </PageHeader.SecondaryActions>
    </PageHeader>
  );
}
```

<Important>
  `PageHeader.SecondaryActions` can only contain `PageLink` or `Link` components. No other component types are supported.
</Important>

### Props

<ComponentProps autoGenerated componentName="PageHeaderSecondaryActions">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>The content to render inside the secondary actions container.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## PageHeader.PageLink

The `PageHeader.PageLink` component renders a button that navigates to another page within your app when clicked. Use this component inside `PageHeader.PrimaryAction` or `PageHeader.SecondaryActions` for in-app navigation.

```tsx theme={null}
import { PageHeader } from "@hubspot/ui-extensions/pages";

// Navigate to a static path
<PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>

// Navigate with path parameters
<PageHeader.PageLink to="/view-contact/:contactId" params={{ contactId: "123" }}>
  View Contact
</PageHeader.PageLink>

// Navigate with query string parameters
<PageHeader.PageLink to="/search" params={{ query: "hubspot", page: "1" }}>
  Search
</PageHeader.PageLink>
```

### Props

<ComponentProps autoGenerated componentName="PageHeaderPageLink">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>Sets the content that will render inside the PageHeader action. This prop is passed implicitly by providing sub-components.</>} />

  <ComponentProp name="to" required={true} type={<><code>string</code></>} description={<>The path to navigate to when the link is clicked. Supports path parameters (e.g. <code>/view-contact/:contactId</code>).</>} />

  <ComponentProp name="params" required={false} type={<><code>Record&lt;string, string&gt;</code></>} description={<>Values for path parameters and query string entries.<br />Parameters matching <code>:paramName</code> tokens in <code>to</code> are substituted into the path.<br />Any remaining parameters are appended as query string entries.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## PageHeader.Link

The `PageHeader.Link` component renders a button that opens a URL outside your app when clicked. It behaves like the standard [`Link`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link) component, but is rendered as a button when used inside `PageHeader.PrimaryAction` or `PageHeader.SecondaryActions`.

```tsx theme={null}
import { PageHeader } from "@hubspot/ui-extensions/pages";

<PageHeader.Link href="https://www.hubspot.com">Visit HubSpot</PageHeader.Link>
```

### Props

<ComponentProps autoGenerated componentName="PageHeaderLink">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>Sets the content that will render inside the PageHeader action. This prop is passed implicitly by providing sub-components.</>} />

  <ComponentProp name="disabled" required={false} type={<><code>boolean</code></>} description={<>Determines whether or not the button should be disabled.</>} />

  <ComponentProp name="href" required={false} type={<><code>string</code></>} description={<>A URL that will be opened when the button is clicked. If the value is a URL external to <code>hubspot.com</code> it will be opened in a new tab.</>} />

  <ComponentProp name="onClick" required={false} type={<><code>(event: &#123; type: string, bubbles: boolean, timeStamp: number, id: string &#125;, reactions: &#123; openPanel: (panelId: string) =&gt; void, closePanel: (panelId: string) =&gt; void, openModal: (modalId: string) =&gt; void, closeModal: (modalId: string) =&gt; void &#125;) =&gt; Promise&lt;void&gt; | void</code></>} description={<>A function that will be invoked when the button is clicked. Do not use this function for submitting a form; use Form's <code>onSubmit</code> function instead.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## Guidelines

* **DO:** use `PageHeader.PrimaryAction` for the most important action on the page.
* **DO:** use `PageHeader.PageLink` for navigating to pages within your app and `PageHeader.Link` for any URLs outside your app pages.
* **DO:** keep link labels short and action-oriented (e.g., "Documentation", "Support").
* **DO:** use `PageHeader.SecondaryActions` for additional or less common actions.
* **DON'T:** include more than one `PageHeader.PrimaryAction` in a PageHeader.
* **DON'T:** include components other than `PageHeader.PageLink` or `PageHeader.Link` in `PageHeader.PrimaryAction` or `PageHeader.SecondaryActions`.

## Related components

* [PageLink](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-link)
* [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link)
* [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button)
* [PageRoutes](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-routes)