How to use NavigationMixin in LWC in Salesforce

In this blog, we’ll dive deep into How to use NavigationMixin in LWC in Salesforce, providing detailed examples, use cases and best practices.

In Salesforce Lightning Web Components (LWC), the NavigationMixin is a powerful utility that allows developers to programmatically navigate between various pages, records, and apps within Salesforce.

It simplifies navigation and enhances the user experience by enabling seamless transitions within your LWC components. It uses PageReference to navigate in the Lightning Experience, Experience Builder sites or the Salesforce mobile app.

Firstly, let’s understand PageReference.

What is PageRegerence?

It is a JavaScript object which acts as a blueprint that tells Salesforce which page to navigate to and what parameters to pass. It has three key elements:

1. State – It is a type of object that allows us to pass additional information that can modify or control the state of the page we want to navigate. For example, If we want to navigate to the Recent List view, information can be stored in the state. Below is the basic syntax.

   state: {
   filterName: 'Recent'
   }

2. Type – It specifies what kind of page we want to navigate. Based on this type, other attributes or states will be defined. It specifies and tells us about the target such as the record page, home page, etc.
3. Attributes – It defines the specific parameters needed for the chosen type. These parameters tell Salesforce exactly what to display (e.g., the record, object, or page in question). The attributes will differ depending on the page type specified.

How to use NavigationMixin in LWC?

We must import the ‘NavigationMixin’ function from the ‘lightning/navigation’ to use the navigation services. We can use this module to navigate to list view, object, record page and even to open any files.

Below is the syntax to import.

Syntax 

import { NavigationMixin } from 'lightning/navigation';

Additionally, we have to apply NavigationMixin to our base component’s class to access its API. Below is the syntax showing how to extend the Navigation.

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationBase extends NavigationMixin(LightningElement) {}

NavigationMixin adds two API’s to our component which provide flexibility in handling navigation and URL generation within the app. However, it’s important to note that invoking these functions before the element is connected to the DOM can cause unexpected results, such as failed navigation or incorrect URL generation.

1. [NavigationMixin.Navigate](pageReference, [replace]) – The Navigate function allows you to programmatically navigate to another page within the Salesforce application. It accepts two arguments: a pageReference object which defines the destination and here we provide details like recordId, objectApiName, actionName and other arguments is an optional replace parameter which is a boolean type if set to true then it will replace the current page in the browser’s history.
2. NavigationMixin.GenerateUrl(pageReference) –  This API is used to generate a URL for a specific page without performing immediate navigation. This function returns a promise that resolves to the URL of the page specified in the pageReference. It is helpful when you don’t want to leave your current page and want to open your navigation page in the new tab.

Let’s see an example of How to use NavigationMixin in LWC for different pages

Navigate to the Object Home Page

In your VS Code, create one Lightning Web Component as navigateToAccountHomePage 

So, below is the code snippet for the LWC to navigate to the Account Home Page.

navigateToAccountHomePage.html

<template>
<lightning-card title="Navigate to Account Home Page" icon-name="account">
<lightning-button label="Navigate to Account Home" onclick={navigateToAccountHome}
class="slds-m-around_small"></lightning-button>
</lightning-card>
</template>

navigateToAccountHomePage.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigateToAccountHomePage extends NavigationMixin(LightningElement) {

navigateToAccountHome() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'home'
}
});
}
}

navigateToAccountHomePage.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>61.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>

Hence, below is the output of this component. We have deployed it to an App Page (My LWC) and then we are navigating to Account Home Page.

Navigate to the Record View Page

Below is the code snippet for the component to navigate to the Record View Page. Here we have taken Account to view the Record Page. In this component, we have taken the static recordId for Account.

But it is not advisable to use static recordId as it gets changed and is not the same as other org. For that, we can use some base component provided in LWC to fetch that recordId and store it in the variable then use it.

navigateToAccountRecordPage.html

<template>
<lightning-card title="Navigate to Account Record View Page">
<lightning-button label="Navigate to Account Record View" onclick={navigateToAccountRecordView}
class="slds-m-around_small"></lightning-button>
</lightning-card>
</template>

navigateToAccountRecordPage.js

import { LightningElement } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';

export default class NavigateToAccountRecordPage extends NavigationMixin (LightningElement) {

navigateToAccountRecordView() {
this[NavigationMixin.Navigate]({
type: "standard__recordPage",
attributes: {
recordId: "0015g00001VQSiKAAX",
objectApiName: "Account",
actionName: "view",
},
});
}
}

Navigate to the Record Edit Page

Below is the code snippet to navigate to the Account Record Edit Page. Here we have created the component as navigateToAccountRecordEditPage. Above we used the static record ID but here we will see how to fetch the current page ID and pass it to the navigation function.

To fetch the current page ID we have deployed this component to the Account record Page. We use the @api variable which makes this component public and then it will be able to communicate with the Flexi Page.

navigateToAccountRecordEditPage.html

<div>
<div><template></div>
<div>    <lightning-card title="Navigate to Account Record Edit Page" icon-name="account"></div>
<div>        <lightning-button label="Navigate to Account Record Edit Page" onclick={navigateToAccountRecordEditPage}</div>
<div>            class="slds-m-around_small"></lightning-button></div>
<div>    </lightning-card></div>
<div></template></div>
</div>

navigateToAccountRecordEditPage.js

<div>

import { LightningElement,api } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';

export default class NavigateToAccountRecordEditPage extends NavigationMixin(LightningElement) {

@api recordId;

navigateToAccountRecordEditPage() {
this[NavigationMixin.Navigate]({
type: "standard__recordPage",
attributes: {
recordId: this.recordId,
objectApiName: "Account",
actionName: "edit",
},
});
}
}

</div>

Navigate to the New Record Page

Here, we will check how to navigate to the new record page. Below is the code snippet for the navigation service.

navigateToNewRecordPage.html

<template>
<lightning-card title="Navigate to New Record Page">
<lightning-button label="Navigate to New Record" onclick={navigateToNewRecordPage}
class="slds-m-around_small"></lightning-button>
</lightning-card>
</template>

navigateToNewRecordPage.js

import { LightningElement } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';

export default class NavigateToNewRecordPage extends NavigationMixin(LightningElement) {

navigateToNewRecordPage() {
this[NavigationMixin.Navigate]({
type: "standard__objectPage",
attributes: {
objectApiName: "Account",
actionName: "new",

},
})
}
}

Navigate to the Related List Page

Below is the code snippet for navigating to the Related List. Here we have taken the example of Account to Contact. So, we have navigated to the Related Contact List.

navigateToRelatedList.html

<div>
<div><template></div>
<div>    <lightning-card title="Navigate to Related List"></div>
<div>        <lightning-button label="Navigate to Related List" onclick={navigateToRecordList}</div>
<div>            class="slds-m-around_small"></lightning-button></div>
<div>    </lightning-card></div>
<div></template></div>
</div>

navigateToRelatedList.js

<div>

import { LightningElement } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';

export default class NavigateToRelatedList extends NavigationMixin(LightningElement) {

navigateToRecordList() {
this[NavigationMixin.Navigate]({
type: "standard__recordRelationshipPage",
attributes: {
recordId: "0015g00001VQSiKAAX",
objectApiName: "Account",
relationshipApiName: "Contacts",
actionName: "view",
},
});
}
}

</div>

Are you preparing for the Salesforce AI Certifications? Checkout the free practice set here

Best Practices for Using NavigationMixin

1. Use Dynamic IDs – Instead of hardcoding record IDs or object API names, retrieve these dynamically based on user interaction or data.
2. Leverage State Parameters – When navigating to a Lightning component, use the state object to pass necessary parameters, allowing for greater flexibility in how components handle navigation.
3. Error Handling – Implement proper error handling to manage scenarios where navigation might fail (e.g., invalid record IDs).
4. Avoid Redundant Navigations – Ensure that unnecessary navigations are avoided to optimize the user experience.
5. Keep User Context –  Always be aware of the user’s context, especially when navigating between record pages or components that depend on a specific context (e.g., related lists, parent records).

Furthermore, let’s also see how GenerateUrl API works. Here I have created a component to show you how GeneratedUrl works. Below is the screenshot.

FAQ’s

1. Can we navigate to external websites using NavigationMixin?

Yes, we can navigate to external websites using the standard__webPage type, providing the full URL in the attributes object.

2. How can we navigate back to the previous page after using Navigation Service?

Salesforce does not provide a built-in back navigation feature using Navigation Service. However, we can use the browser’s native function which is history.back().

3. How can I preview a file in Salesforce using NavigationMixin?

We can preview files by using type as standard__namedPage, providing the contentDocumentId.

Conclusion

In this blog, we explored how to use NavigationMixin in LWC in Salesforce for navigating to record pages, related lists, home pages, etc. By using this developers can not only streamline navigation processes but also create interactive applications that cater to users’ needs.

The ability to pass parameters and manage state allows for more personalized and responsive designs, ultimately improving user satisfaction.

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit