> ## 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: 3be837ea-eb5f-43d8-8df9-8738928234e4
---

# PageLink

> Learn about the PageLink component for navigating between pages in your app.

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

```tsx theme={null}
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>
```

<Warning>
  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`.
</Warning>

## Basic usage

Here's a complete example showing how to use `PageLink` within a page component:

```tsx theme={null}
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

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

  <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-extensibility/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## Examples

### Simple page navigation

```tsx theme={null}
<PageLink to="/docs">Documentation</PageLink>
<PageLink to="/support">Support</PageLink>
<PageLink to="/analytics">Analytics</PageLink>
```

### Navigation with query parameters

```tsx theme={null}
// 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>
```

### Navigation with path parameters

```tsx theme={null}
// 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>
```

## PageLink vs Link

Use the right component for your navigation needs:

| Component  | Use for                                      | Import from                    |
| ---------- | -------------------------------------------- | ------------------------------ |
| `PageLink` | Internal navigation to pages within your app | `@hubspot/ui-extensions/pages` |
| `Link`     | External URLs outside your app               | `@hubspot/ui-extensions`       |

```tsx theme={null}
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).

## Related components

* [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link)
* [PageHeader](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-header)
* [PageBreadcrumbs](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-breadcrumbs)
* [PageRoutes](/apps/developer-platform/add-features/ui-extensions/ui-components/app-page-components/page-routes)

## Related resources

* [Page linking guide](/apps/developer-platform/add-features/ui-extensions/extension-points/app-pages/page-linking)
* [Page routing guide](/apps/developer-platform/add-features/ui-extensions/extension-points/app-pages/page-routing)