# Navigate

## Overview

The Navigate interaction allows you to define navigation actions when users interact with components, such as clicking a button. This feature enables seamless redirection to various page types, enhancing user engagement and creating a smooth browsing experience across your site.

<figure><img src="/files/pDlkVdqg9339MuzQmzBI" alt="" width="563"><figcaption></figcaption></figure>

### **Key Features**

* Supports multiple page reference types
* Customizable navigation actions
* Improves site navigation flow

### Use Cases

* **Product Page:** Redirect to a detailed product spec page.
* **Support Page:** Navigate to a help article or contact form.
* **Community Page:** Link to a member profile or discussion thread.
* **Event Page:** Direct to an event registration form.
* **Landing Page:** Guide to a campaign details page.
* **Profile Page:** Navigate to related contact records.

## Configuration

Add the Navigate interaction to a component (e.g., Button) on an Experience Cloud site page and configure it via the Interactions Tab in Experience Builder.

### **Available Navigation Types**

These page-reference types specify where users are directed.

| Navigation Type                              | Description                                                     | Example Use Case                     |
| -------------------------------------------- | --------------------------------------------------------------- | ------------------------------------ |
| **Aura - External Record Page**              | Links to a specific record page using the Aura framework.       | View a Contact’s details.            |
| **Aura - External Record Relationship Page** | Links to related records (e.g., Contacts of an Account).        | See Opportunities for an Account.    |
| **Aura - Login Page**                        | Triggers login or logout actions.                               | Log in to access restricted content. |
| **Knowledge Article**                        | Directs to a specific Knowledge Article.                        | Access a support article.            |
| **Managed Content Page**                     | Links to a CMS-managed content page.                            | View a news article.                 |
| **Named Page**                               | Redirects to an internal Experience Builder page.               | Go to a "Support" named page.        |
| **Object Page**                              | Navigates to a list view or new record page for an object.      | Open the Contact list view.          |
| **Record Page**                              | Links to a specific record’s detail page.                       | View an Account record.              |
| **Record Relationship Page**                 | Navigates to a related list (e.g., Opportunities of a Contact). | See Cases for an Account.            |
| **Web Page**                                 | Redirects to an external or internal web page.                  | Link to a partner site.              |

*<mark style="background-color:green;">**Best Practice**</mark>:* Choose the type based on the target (e.g., Record Page for records); test navigation in preview.

**Configuring Navigation to a Specific Page**

To set up navigation to a specific page or resource, follow these steps based on your use case:

### **Navigate to a Named Page**

1. Add a Button component and go to the **Interactions** Tab.
2. Select **Navigate** and choose **Named Page**.
3. **Page Name:** Enter the API name of the target page (e.g., Content\_Document\_\_c).
4. *Why this?* Directs users to an internal page (e.g., a content document page) defined in Experience Builder.

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

### **Navigate to a Record Page**

Use this option when you want a button or component to open a specific record’s detail page in your Experience Cloud site

#### Configuration Steps

1. Select **Navigate** and choose **Record Page**.
2. **Object API Name:** Enter the object (e.g., Contact).
3. **Record ID:** Select the correct record ID field for redirection; usually, it is “**`Record: Id`**”.
4. **Action Name:** Set to View (default for details).

*Why this?* Takes users to the detail page for a specific record (e.g., a Contact record).

<figure><img src="/files/8JB5lVCJuRzvffJdOF3E" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### Important

To ensure navigation to a record page works correctly, first create the Object Page on your Experience site where the Navigate interaction should land. If this page doesn’t exist, the Navigate to Record Page interaction will not function.
{% endhint %}

### **Navigate to an External Web Page**

Use this option when you want a button or component to open an external site or another web resource, such as your main website, a partner portal, or a documentation page

#### Configuration Steps

1. Choose the **Navigate** interaction and select the **Web Page** option.
2. **Target URL:** You can either:
   * Select a field (e.g., a formula field on the record that stores the URL) to dynamically set the redirection target.
   * Or, choose **Custom** and manually enter an external URL (e.g., <https://www.example.com>).
3. **Why this?** This option redirects users to an external website or resource, enhancing site connectivity.
4. **Troubleshooting:** If the navigation doesn’t work, check that the URL or selected field value is valid, and ensure the user has the necessary permissions to access the target site.

### **Passing URL Parameters with Navigate to Named Page**

This feature allows you to send dynamic data (e.g., a record ID) to a target page, customizing its content based on user context. It’s perfect for creating personalized experiences, such as showing specific record details on a new page.

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

{% stepper %}
{% step %}

#### **Set Up the Target Page**

Add a component like Avonni Record Detail to the target page (e.g., CustomerDetails). In its "Record ID" attribute, use the expression {!Route.recordId} to capture a URL parameter named recordId.

<figure><img src="/files/jmy3QS0MAdujTGVQNlkz" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Set Up the Button**

On the source page (e.g., homepage), add an Avonni Button. In the **Navigate** settings, choose **Named Page** and enter the API name (e.g., CustomerDetails).
{% endstep %}

{% step %}

#### **Add Parameters**

* **Name:** Enter recordId (matching the target component’s attribute).
* **Value:** Select a field (e.g., {!Record.Id}) or enter a specific record ID to pass.

<figure><img src="/files/Yl7DOm9tjAaPbOGBHswn" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*Why is this Useful*

This feature allows you to send dynamic data (e.g., a record ID) to the target page, customizing its content. For example, clicking a button on the homepage can take users to a CustomerDetails page showing a specific Contact’s info based on the passed recordId.
{% endstep %}

{% step %}
*Analogy*

Think of it like addressing a letter—the Navigate to Named Page is the envelope, and the URL parameter (e.g., recordId) is the address, telling the system where to go and what data to bring
{% endstep %}

{% step %}
*Troubleshooting*

If the target page doesn’t load correctly, ensure the recordId parameter matches the target component’s attribute and that the ID is valid.
{% endstep %}
{% endstepper %}

### **Navigate to a Knowledge Article**

1. Select **Navigate** and choose **Knowledge Article**.
2. **Url Name:** Enter the expression `{{Record.UrlName}}` to dynamically link to the Knowledge Article associated with the current record.
3. *Why this?* Directs users to a specific Knowledge Article page based on the `UrlName` field of the current record, simplifying access to support content.
4. *Tip:* The `{{Record.UrlName}}` expression uses the LWR syntax to pull the unique URL name of the Knowledge Article (e.g., from a related record). Ensure the record has a valid `UrlName` field populated.
5. *Troubleshooting:* If navigation fails, verify the `UrlName` field exists and contains a valid Knowledge Article URL segment (e.g., article-title); check user permissions to access the article.

***

## Examples

### **Example 1: Navigate to Support Page**

This example adds a button to navigate to a support page on an Experience Cloud site.

1. **Configure Button:**
   * **Label:** "Get Support"
   * **Icon Name:** utility:help
   * **Variant:** neutral
   * *Why this?* Creates a help button for user assistance.
2. **Set Link To Interaction:**
   * **Navigate:**
     * **Type:** Named Page
     * **Page Name:** Customer\_Support\_\_c
     * *Why this?* Redirects to the CustomerSupport page defined in Experience Builder.

**Result:** Users click the button on any page, navigating to the support page.

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

***

## Key Considerations

* **Target Accuracy:** Ensure page names or IDs match exactly.
* **Performance:** Keep navigation targets lightweight.
* **Accessibility:** Test button focus and contrast.
* **Security:** Validate external URLs to prevent issues.

***

## Troubleshooting Common Issues

* **Navigation Not Working:** Check the selected type and target (e.g., correct Page Name or Record ID); verify permissions.
* **Page Not Found:** Ensure the named page or object exists in Experience Builder.
* **Dynamic ID Fails:** Confirm the record ID source (e.g., {!Record.Id}) is valid.
* **If Issues Persist:** Contact our support team at <support@avonni.com> for assistance.

***

## Summary

The Avonni Navigate component enhances Experience Cloud sites with customizable navigation actions. It’s perfect for guiding users to pages or resources


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/navigate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.