> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/navigate.md).

# Navigate

The Navigate interaction sends users to another Salesforce page or an external URL when they interact with your Dynamic Component.

## Overview

The Navigate interaction lets you control where users go when they click interactive elements (such as buttons, links, or table rows) in your Dynamic Component.

**Important:** Navigate interactions only work on deployed Lightning Pages. They will not function in Preview Mode.

<figure><img src="/files/fZTGAW1YfTJAzYa5bb1O" alt=""><figcaption></figcaption></figure>

### Understanding Page Reference Types

When you add a Navigate interaction, you first choose a **Page Reference Type**. This tells Salesforce what kind of destination you're navigating to.

**Available types**:

* [**External Record Page**](#external-record-page)**:** Navigate to an Experience Cloud external record page.
* [**External Record Relationship Page**](#external-record-relationship-page)**:** Navigate to an external record relationship page.
* [**Knowledge Article**](#knowledge-article)**:** Navigate to a particular article of knowledge.
* [**Login Page**](#login-page-experience-builder-sites)**:** Navigate to the login page of an Experience Builder site.
* [**Managed Content (CMS) Page**](#managed-content-cms-page)**:** Navigate to a Salesforce CMS content item.
* [**Named Page**](#named-page)**:** Navigate to an Experience Builder page by name.
* [**Object Page**](#object-page)**:** Navigate to a standard or custom object page (list view, new record page, etc.).
* [**Record Page**](#record-page-most-common)**:** Navigate to a specific record's detail page.
* [**Record Relationship Page**](#record-relationship-page): A specific related list for a record (e.g., an Account's Contacts).
* [**Web Page**](#web-page)**:** Navigate to an external website (URL).

The following sections detail how to configure each page reference type.

***

## Configuration

### Record Page (Most Common)

Use this to open the detail, edit, or clone screen for a specific record.

* **Object API Name**: The API name of the target object (e.g., `Account`, `Contact`).
* **Action Name**: Choose `view` (detail page), `edit`, or `clone`.
* **Record ID**: You must specify which record the interaction should act on. You have two primary ways to do this:

#### **Option A: From a Table Row**

**Use this when**: Your component contains a list or table, and you want to open the record the user just clicked.

* **Syntax**: `Record:Id`
* **Example**: A user clicks a "View" button next to a specific contact in your custom list. The interaction grabs the ID of *just that row*.

#### **Option B: From the Current Page (@recordId)**

Use this when: Your component is sitting on a Record Detail Page (like an Account page) and you want to trigger an action on that exact record.

* **Syntax**: `$Component.RecordId`
* **What it does**: It automatically grabs the 18-digit ID from the browser URL of the page the user is currently viewing.
* **Example**: You place a custom "Edit Account" button on the Account Record Page.
  * If a user is looking at the "Acme Corp" account, `$Component.RecordId` automatically becomes the ID for Acme Corp.
  * If they switch to the "Global Industries" account, the exact same button now uses the ID for Global Industries.

{% hint style="warning" %}

#### Important

Prerequisite for `$Component.RecordId`: For `$Component.RecordId` to work, you must set the [**Target Page Object**](/dynamic-components/core-concepts/target-page-object.md) in your component settings to match the page it lives on. If your component is on an Account page, set the Target Page Object to Account. This "unlocks" the component's ability to see the current record's ID.
{% endhint %}

{% @arcade/embed url="<https://app.arcade.software/share/iMxXZbQESywpcC8OFa2W>" flowId="iMxXZbQESywpcC8OFa2W" %}

***

### Object Page

Use this for high-level object navigation rather than specific records.

* **Object API Name**: The target object (e.g., `Lead`).
* **Action Name**: \*
  * `home`: The object's home page.
  * `list`: A specific list view.
  * `new`: Opens a blank "New Record" modal.

When using the `new` action, you can prefill field values on the new record, and optionally enable a record-type check so the user selects a record type before the new record is created.

{% hint style="success" %}

#### **💡 Tip**

When using the `new` action, you can pre-populate fields. For example, when creating a Contact from an Account page, map `AccountId` to `@recordId` to link them automatically.
{% endhint %}

{% @arcade/embed url="<https://app.arcade.software/share/OrrlygDeqJsK1R9gedpz>" flowId="OrrlygDeqJsK1R9gedpz" %}

***

### Web Page

Navigate to any internal or external URL.

#### **Configuration**

* **Page Reference Type:** `Web Page`
* **URL:** You have two options:
  * **Static URL:** Enter the full URL of the website directly (e.g., `https://www.example.com`). This will always navigate to the same website.
  * **Dynamic URL (from a Field):** Select a field from the component's context that contains the URL. This formula field typically constructs the URL based on other data. For example, you might have a formula field on an Account object that generates a URL to the Account's website. You could then select that formula field here. This lets the destination URL change dynamically based on the record being viewed or selected.
* **Target:** Choose whether the page opens in a new tab/window (`_blank`) or the current window (`_self`).

***

### External Record Page

Use this to navigate to an Experience Cloud external record page (for example, CMS-backed content records).

#### **Configuration**

* **Page Reference Type:** External Record Page
* **Record ID:** The external record identifier. If the component has a query data source and the interaction is triggered by a record-related item, you can reference a field of that record with the `{{Record.FieldName}}` syntax (e.g., `{{Record.AccountId}}`); the field must be a valid Reference field. Otherwise, provide a literal record ID.
* **CMS Source Name / CMS Type Name:** The CMS source name and type name that define the external record.

***

### External Record Relationship Page

Use this to navigate to an external record relationship page.

#### **Configuration**

* **Page Reference Type:** External Record Relationship Page
* **Record ID:** The external record identifier. As with the External Record Page, you can reference a Reference field via `{{Record.FieldName}}` (e.g., `{{Record.Id}}`) when the component has a query data source, or provide a literal record ID.
* **Object Type:** The external record type (for example, `quip` for Quip documents).

***

### Knowledge Article

Use this to navigate to a specific Knowledge Article.

#### **Configuration**

* **Page Reference Type:** `Knowledge Article`
* **URL Name:** Enter the URL Name of the specific article you want to link to.

***

### Login Page (Experience Builder Sites)

**Use this to:** Navigate to login or logout pages in Experience Builder sites.

#### **Configuration**

1. **Page Reference Type:** Login Page
2. **Action Name:**
   * `login` - Navigate to login page
   * `logout` - Log the user out

***

### Managed Content (CMS) Page

Use this to navigate to a Salesforce CMS content item.

#### **Configuration**

* **Page Reference Type:** Managed Content Page
* **Content Type Name:** The Salesforce CMS content type name.
* **Content Key:** The unique CMS content key identifying the content item.

***

### Named Page

**Use this to:** Navigate to an Experience Cloud (Experience Builder) page by name.

#### **Configuration**

1. **Page Reference Type:** Named Page
2. **Page Name:** The name of the Experience Builder page you want to open (a custom object name can be appended with `__c`).
3. **Parameters:** Optionally pass key-value parameters to that page.

***

### Record Relationship Page

The Record Relationship Page interaction acts as a "Deep Link" to a specific related list. Instead of just sending a user to a record's main page, it takes them directly to the "View All" screen for a related category (e.g., all Contacts for a specific Account).

#### Configuration

To set this up, you need to define the Parent (where the data comes from) and the Relationship (which list you want to see).

* **Object API Name**: The API name of that Parent record (e.g., `Account`).
* **Record ID**: The ID of the "Anchor" or Parent record.
  * *Example:* If you are on an Account page, use `$Component.RecordId`.
  * *Example:* If clicking a row in a table of Accounts, use `Record: Id`.
* **Relationship API Name**: The API name of the relationship you want to open.
  * *<mark style="background-color:red;">Crucial Note</mark>:* This is often plural and different from the Object name.
  * *Common Examples:* `Contacts`, `Opportunities`, `Cases`, or `Custom_Objects__r`.

**A Visual Scenario**

**The Setup**: You have a "Summary Component" on your Home Page showing high-priority Accounts. You add a button labeled "Manage All Contacts."

The Configuration:

* **Record ID**: `Record: Id`
* **Object API Name**: `Account`
* **Relationship API Name**: `Contacts`

**The Result**: When the user selects "Acme Corp" in your table and clicks the button, Salesforce immediately opens the full-page list of every Contact associated with Acme Corp.

<figure><img src="/files/3BWPUwYE5QCixCWAoqly" alt="" width="375"><figcaption></figcaption></figure>

***

### Opening in a Console Tab

Independent of the page reference type, you can have the destination open inside a Lightning Console App tab instead of the current window. When the console-tab option is enabled you can additionally:

* Open the destination as a **subtab**, optionally under a specific parent tab.
* Provide a **record ID** or **URL** to load directly in the tab.
* **Focus** the tab after opening, or **override navigation rules** to force it to open.
* Set a custom **label**, **icon**, and **icon alternative text** for the tab. When the component uses a query data source and the interaction is triggered by a record-related item, these can reference record fields via the `{{Record.FieldName}}` syntax.

***

## Troubleshooting

<details>

<summary><strong>Problem:</strong> Clicking a button with a Web Page interaction does nothing, or navigation doesn't work</summary>

**Possible Causes & Solutions:**

1. **Preview Mode Limitation**
   * <mark style="background-color:orange;">⚠️</mark> <mark style="background-color:orange;">**Interactions do not work in Preview Mode**</mark>
   * You must deploy your Dynamic Component to a Lightning Page and view it in the actual Salesforce environment to test navigation interactions
   * Preview mode is only for visual layout verification, not functional testing
2. **Invalid or Empty URL**
   * Verify the URL is formatted correctly and includes the protocol (e.g., `https://`)
   * If using a dynamic URL field, check that the field actually contains a valid URL value
   * Test the URL directly in a browser to ensure it's accessible
   * Use the browser Developer Tools (F12) Console to check for JavaScript errors
3. **Missing Protocol (http\:// or https\://)**
   * URLs must include the full protocol: `https://www.example.com` (correct)
   * `www.example.com` alone will not work (incorrect)
   * If using a dynamic field, ensure the field value includes the protocol
4. **Salesforce Security Restrictions**
   * External URLs may need to be added to your org's Trusted Sites
   * Go to Setup → CSP Trusted Sites and add the domain
   * Some organizations have strict Content Security Policies that block external navigation
5. **Pop-up Blockers**
   * If the navigation opens in a new tab/window, browser pop-up blockers may prevent it
   * Check browser settings and allow pop-ups for your Salesforce domain
   * Consider using navigation that opens in the same tab instead
6. **Dynamic URL Field Issues**
   * Verify the field reference is correct and pointing to the right object/record
   * Check that the field has data (not null or empty)
   * For formula fields, verify the formula is correctly constructing the URL
   * Test the field value independently to ensure it contains a valid URL
7. **Interaction Not Properly Configured**
   * Verify the interaction is actually added to the component (check the Interactions panel)
   * Ensure the correct event trigger is selected (e.g., "On Click" for buttons)
   * Check that the Navigate action is configured correctly within the interactio.n
8. **Component Context Issues**
   * If using a dynamic URL from a selected row or record, ensure a record is actually selected
   * For Data Table components, verify that row selection is enabled and working
   * Check that the context variable (e.g., `@AccountsTable.firstSelectedRow.Website__c`) has a value.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/navigate.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.