Skip to main content
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:
  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. 
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

​
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:
ComponentPurposeLocation
PageTitleDisplays the page title and sets browser tab titleInside page content, after breadcrumbs
PageHeaderProvides action buttons in the page headerAt 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
Last modified on April 14, 2026