PageTitle

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.

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

<PageTitle>Contact Us</PageTitle>

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.

What PageTitle does

The PageTitle component serves two key functions:

Visual page heading: Renders the main title heading at the top of your page
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.

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

Prop	Type	Description

Examples

Simple page title

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

<PageTitle>Documentation</PageTitle>

Title with breadcrumbs

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

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:

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:

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:

<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

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

Build apps

Add features

Publish to the HubSpot Marketplace

Skeleton group 5

What PageTitle does

Basic usage

Props

Examples

Simple page title

Dynamic page title

Title in a layout component using route IDs

Complete page structure

How document.title works

PageTitle vs PageHeader

Guidelines

Accessibility and user experience

​What PageTitle does

​Basic usage

​Props

​Examples

​Simple page title

​Title with breadcrumbs

​Dynamic page title

​Title in a layout component using route IDs

​Complete page structure

​How document.title works

​PageTitle vs PageHeader

​Guidelines

​Accessibility and user experience

​Related resources

What PageTitle does

Basic usage

Props

Examples

Simple page title

Title with breadcrumbs

Dynamic page title

Title in a layout component using route IDs

Complete page structure

How document.title works

PageTitle vs PageHeader

Guidelines

Accessibility and user experience

Related resources