Skip to main content
The PageLink component is used to create clickable links that navigate to other pages within your app. Use PageLink for internal page navigation and the standard Link component for external URLs. 
import { PageLink } from "@hubspot/ui-extensions/pages";

// Basic link to another page
<PageLink to="/docs">Documentation</PageLink>

// Link with parameters
<PageLink to="/contacts" params={{ filter: "active" }}>
  Active Contacts
</PageLink>
To use this component, 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.

​
Basic usage

Here’s a complete example showing how to use PageLink within a page component: 
import React from "react";
import { Text, Heading } from "@hubspot/ui-extensions";
import { PageLink, PageBreadcrumbs, PageTitle } from "@hubspot/ui-extensions/pages";

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

      <Heading>Getting Started</Heading>


      <Text>
        Check out our <PageLink to="/support">support page</PageLink> for help.
      </Text>
    </>
  );
};

​
Props

​
Examples

​
Simple page navigation

<PageLink to="/docs">Documentation</PageLink>
<PageLink to="/support">Support</PageLink>
<PageLink to="/analytics">Analytics</PageLink>

// Navigate to /docs?section=getting-started
<PageLink to="/docs" params={{ section: "getting-started" }}>
  Getting Started Guide
</PageLink>

// Navigate to /analytics?view=dashboard&period=30d
<PageLink
  to="/analytics"
  params={{ view: "dashboard", period: "30d" }}
>
  Dashboard (Last 30 Days)
</PageLink>

// Navigate to /view-contact/12345
<PageLink
  to="/view-contact/:contactId"
  params={{ contactId: "12345" }}
>
  View Contact
</PageLink>

// Navigate to /deals/456/notes/789?highlight=comments
<PageLink
  to="/deals/:dealId/notes/:noteId"
  params={{
    dealId: "456",
    noteId: "789",
    highlight: "comments"
  }}
>
  View Note
</PageLink>
Use the right component for your navigation needs:
ComponentUse forImport from
PageLinkInternal navigation to pages within your app@hubspot/ui-extensions/pages
LinkExternal URLs outside your app@hubspot/ui-extensions
import { Link } from "@hubspot/ui-extensions";
import { PageLink } from "@hubspot/ui-extensions/pages";

// Internal navigation - use PageLink
<PageLink to="/docs">Documentation</PageLink>

// External URL - use Link
<Link href="https://www.example.com">External Site</Link>

​
Guidelines

  • DO: use PageLink for all navigation between pages within your app.
  • DO: use descriptive link text that clearly indicates where the link leads.
  • DO: use the params prop for passing data through URLs.
  • DON’T: use PageLink for external URLs - use the standard Link component instead.
  • DON’T: use PageLink for actions that aren’t navigation (use Button with onClick instead).
Last modified on April 14, 2026