> ## 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: 7bf253cf-e0cd-4717-9db8-513c9f0d1d36
---

# PageTitle

> Learn about the PageTitle component for displaying page titles in 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 `PageTitle` component is used to display the main title heading on your page and automatically updates the browser tab's `document.title` to match. This provides both visual page identification and improved user experience when users have multiple browser tabs open.

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

<PageTitle>Contact Us</PageTitle>
```

<Warning>
  To use this component, you'll need to be on version `0.10.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>

## What PageTitle does

The `PageTitle` component serves two key functions:

1. **Visual page heading**: Renders the main title heading at the top of your page
2. **Browser document title**: Automatically updates the browser tab's `document.title` to match the page title

This dual functionality helps users understand which page they're viewing, both within your app and when switching between browser tabs.

## Basic usage

The `PageTitle` component should be placed near the top of your page component, immediately after `PageBreadcrumbs` (if present). It works alongside `PageHeader` - use `PageTitle` for the page title and `PageHeader` for action buttons.

```tsx theme={null}
import React from "react";
import { Text, Heading } from "@hubspot/ui-extensions";
import { PageBreadcrumbs, PageTitle } from "@hubspot/ui-extensions/pages";

const SupportPage = () => {
  return (
    <>
      <PageBreadcrumbs>
        <PageBreadcrumbs.PageLink to="/">Home</PageBreadcrumbs.PageLink>
        <PageBreadcrumbs.Current>Support</PageBreadcrumbs.Current>
      </PageBreadcrumbs>
      <PageTitle>Support</PageTitle>

      <Heading>How can we help?</Heading>
      <Text>Browse our support resources...</Text>
    </>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="PageTitle">
  <ComponentProp name="children" required={true} type={<><code>string</code></>} description={<>The text to display as the page heading. Also sets the browser tab title.</>} />

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

## Examples

### Simple page title

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

<PageTitle>Documentation</PageTitle>
```

### Title with breadcrumbs

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

<>
  <PageBreadcrumbs>
    <PageBreadcrumbs.PageLink to="/">Home</PageBreadcrumbs.PageLink>
    <PageBreadcrumbs.Current>Documentation</PageBreadcrumbs.Current>
  </PageBreadcrumbs>
  <PageTitle>Documentation</PageTitle>
</>
```

### Dynamic page title

```tsx theme={null}
import { PageBreadcrumbs, PageTitle, usePageRoute } from "@hubspot/ui-extensions/pages";

const ContactPage = () => {
  const { params: { contactId } } = usePageRoute();

  return (
    <>
      <PageBreadcrumbs>
        <PageBreadcrumbs.PageLink to="/">Home</PageBreadcrumbs.PageLink>
        <PageBreadcrumbs.PageLink to="/contacts">Contacts</PageBreadcrumbs.PageLink>
        <PageBreadcrumbs.Current>Contact {contactId}</PageBreadcrumbs.Current>
      </PageBreadcrumbs>
      <PageTitle>Contact {contactId}</PageTitle>

      {/* Rest of page content */}
    </>
  );
};
```

### Title in a layout component using route IDs

When using a layout component, you can use `routeId` from `usePageRoute()` to set the page title based on the active route:

```tsx theme={null}
import { ReactNode } from "react";
import { Flex } from "@hubspot/ui-extensions";
import { createPageRouter, PageRoutes, PageTitle, usePageRoute } from "@hubspot/ui-extensions/pages";

const TITLES: Record<string, string> = {
  home: "Home",
  docs: "Documentation",
  support: "Support",
  "not-found": "Page Not Found",
};

function AppLayout({ children }: { children: ReactNode }) {
  const { routeId } = usePageRoute();

  return (
    <Flex direction="column" gap="medium">
      <PageTitle>{TITLES[routeId]}</PageTitle>
      {children}
    </Flex>
  );
}

const PageRouter = createPageRouter(
  <PageRoutes layoutComponent={AppLayout}>
    <PageRoutes.IndexRoute id="home" component={HomePage} />
    <PageRoutes.Route id="docs" path="/docs" component={DocsPage} />
    <PageRoutes.Route id="support" path="/support" component={SupportPage} />
    <PageRoutes.AnyRoute id="not-found" component={NotFoundPage} />
  </PageRoutes>
);
```

### Complete page structure

Here's a complete example showing how `PageTitle` works with `PageBreadcrumbs` and `PageHeader`:

```tsx theme={null}
import React from "react";
import { Text, Heading, Flex, Link } from "@hubspot/ui-extensions";
import { PageHeader, PageBreadcrumbs, PageTitle, hubspot } from "@hubspot/ui-extensions/pages";

hubspot.extend<"pages">(() => <AnalyticsPage />);

const AnalyticsPage = () => {
  return (
    <>
      <PageHeader>
        <PageHeader.PrimaryAction>
          <PageHeader.PageLink to="/">Home</PageHeader.PageLink>
        </PageHeader.PrimaryAction>
        <PageHeader.SecondaryActions>
          <PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>
          <PageHeader.Link href="https://example.com/export">Export Data</PageHeader.Link>
        </PageHeader.SecondaryActions>
      </PageHeader>

      <PageBreadcrumbs>
        <PageBreadcrumbs.PageLink to="/">Home</PageBreadcrumbs.PageLink>
        <PageBreadcrumbs.Current>Analytics</PageBreadcrumbs.Current>
      </PageBreadcrumbs>
      <PageTitle>Analytics Dashboard</PageTitle>

      <Flex direction="column" gap="md">
        <Heading>Performance Metrics</Heading>
        <Text>Your analytics data appears here...</Text>
      </Flex>
    </>
  );
};
```

## How document.title works

When you use `PageTitle`, the browser tab title automatically updates to match:

```tsx theme={null}
<PageTitle>Contact Details</PageTitle>
// Browser tab shows: "Contact Details"
```

This is particularly helpful when users have multiple tabs open, as they can easily identify which tab contains which page of your app.

## PageTitle vs PageHeader

`PageTitle` and `PageHeader` serve different purposes and should be used together:

| Component    | Purpose                                            | Location                               |
| ------------ | -------------------------------------------------- | -------------------------------------- |
| `PageTitle`  | Displays the page title and sets browser tab title | Inside page content, after breadcrumbs |
| `PageHeader` | Provides action buttons in the page header         | At the app level, outside page routes  |

```tsx theme={null}
// Routes are defined with createPageRouter
const PageRouter = createPageRouter(
  <PageRoutes>
    <PageRoutes.IndexRoute component={HomePage} />
    <PageRoutes.Route path="/docs" component={DocsPage} />
  </PageRoutes>
);


const AppPages = () => {
  return (
    <>
      {/* PageHeader is defined once at the app level */}
      <PageHeader>
        <PageHeader.PrimaryAction>
          <PageHeader.PageLink to="/">Home</PageHeader.PageLink>
        </PageHeader.PrimaryAction>
        <PageHeader.SecondaryActions>
          <PageHeader.PageLink to="/docs">Documentation</PageHeader.PageLink>
        </PageHeader.SecondaryActions>
      </PageHeader>

      <PageRouter />
    </>
  );
};

hubspot.extend<"pages">(() => <AppPages />);
```

## Guidelines

* **DO:** place `PageTitle` at the top of your page component, immediately after `PageBreadcrumbs`.
* **DO:** keep titles concise and descriptive (typically 1-5 words).
* **DO:** use meaningful titles that help users understand the current page.
* **DO:** consider how the title appears in browser tabs and bookmarks.
* **DO:** include `PageTitle` on every page in your app.
* **DON'T:** use `PageTitle` for section headings - use `Heading` components instead.
* **DON'T:** include redundant words like "Page" in the title (e.g., use "Settings" not "Settings Page").
* **DON'T:** make titles too long - they get truncated in browser tabs.

## Accessibility and user experience

Proper page titles improve both accessibility and user experience:

* **Screen readers**: users with screen readers hear the page title when navigating
* **Browser tabs**: users can identify pages when switching between tabs
* **Browser history**: meaningful titles make it easier to find pages in browser history
* **Bookmarks**: descriptive titles create useful bookmark names
* **Navigation**: clear titles help users understand where they are in your app

## Related resources

* [Page routing guide](/apps/developer-platform/add-features/ui-extensions/extension-points/app-pages/page-routing)
* [PageBreadcrumbs](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-breadcrumbs)
* [PageHeader](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-header)
* [Heading](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading)
* [PageLink](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-link)