Lightning Navigation Service in Lightning Web Component

This post explains you to use lightning/navigation in custom Lightning Web Component so that you can navigate in Lightning Experience, Lightning Communities, and the Salesforce app.
You can also say that lightning/navigation is an alternative of Aura force:navigateToComponent.

The navigation service, lightning/navigation uses a PageReference instead of a URL. By using it in this way it also insulates your component from future changes to URL formats. 
In addition, PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page. 

However, the lightning/navigation service is supported only in Lightning Experience, Lightning Communities, and the Salesforce app.
This isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out.

Also, lightning/navigation won’t work if you access these containers inside Lightning Experience or the Salesforce app.

So, to Use the NavigationMixin in Lightning Web Component or LWC you need to follow below mentioned steps:

1. Firstly, import the lightning/navigation module in the LWC Component:

import { NavigationMixin } from 'lightning/navigation';

2. Secondly, Apply the NavigationMixin function

export default class MyCustomElement extends NavigationMixin(LightningElement) {}

3. To clarify, the Page Reference type generates a unique URL format and defines attributes that apply to all pages of that type.
Following Page Reference type are supported:

• Lightning Component
• Knowledge Article
• Login Page
• Named Page
• Navigation Item Page
• Object Page
• Record Page
• Record Relationship Page
• Web Page

The NavigationMixin adds two APIs to your component’s class.

1. [NavigationMixin.Navigate](pageReference, [replace]) – A component calls this API to navigate to another page in the application.
2. NavigationMixin.GenerateUrl – A component calls this API to get a promise that resolves to the resulting URL. And, the component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(URL) browser API.

4. After that, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace]) function to dispatch the navigation request.

 navigateToObjectHome() {
    // Navigate to the Account home page
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'home',
        },
    });
}

Moreover, you can use below snippets as per the requirement.

1. navigateToObjectHome: In addition below snippet shows how to navigate to object home page.

 navigateToObjectHome() {
     // Navigate to the Case object home page.
     this[NavigationMixin.Navigate]({
         type: 'standard__objectPage',
         attributes: {
             objectApiName: 'Case',
             actionName: 'home'
         }
     });
 }

2. navigateToListView: Below snippet shows how to navigate to List View.

 navigateToListView() {
     // Navigate to the Contact object's Recent list view.
     this[NavigationMixin.Navigate]({
         type: 'standard__objectPage',
         attributes: {
             objectApiName: 'Contact',
             actionName: 'list'
         },
         state: {
             // 'filterName' is a property on the page 'state'
             // and identifies the target list view.
             // It may also be an 18 character list view id.
             filterName: 'Recent' // or by 18 char "00BT0000002TONQMA4"
         }
     });
 }

2. navigateToNewRecordPage: Below snippet shows you, how you can navigate to create new record page.

navigateToNewRecordPage() {
         // Opens the new Account record modal
         // to create an Account.
         this[NavigationMixin.Navigate]({
             type: 'standard__objectPage',
             attributes: {
                 objectApiName: 'Account',
                 actionName: 'new'
             }
         });
     }

3. navigateToRecordViewPage: Below snippet shows how to navigate to view a Record Page.

 navigateToRecordViewPage() {
         // View a custom object record.
         this[NavigationMixin.Navigate]({
             type: 'standard__recordPage',
             attributes: {
                 recordId: "a03B0000002tEurIAE",
                 objectApiName: 'namespace__ObjectName', // objectApiName is optional
                 actionName: 'view'
             }
         });
     }

4. navigateToRecordEditPage: Below snippet shows how to navigate to edit a Record Page.

navigateToRecordEditPage() {
    // Opens the Account record modal
    // to view a particular record.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: "001B000000ZBz22IAD",
            objectApiName: 'Account', // objectApiName is optional
            actionName: 'edit'
        }
    });
}

5. navigateToRelatedList: Below snippet shows how to navigate to Related List.

navigateToRelatedList() {
         // Navigate to the CaseComments related list page
         // for a specific Case record.
         this[NavigationMixin.Navigate]({
             type: 'standard__recordRelationshipPage',
             attributes: {
                 recordId: '500xx000000Ykt4AAC',
                 objectApiName: 'Case',
                 relationshipApiName: 'CaseComments',
                 actionName: 'view'
             }
         });
     }

6. navigateToTabPage: Below snippet shows how to navigate to Tab Page.

navigateToTabPage() {
         // Navigate to a specific CustomTab.
         this[NavigationMixin.Navigate]({
             type: 'standard__navItemPage',
             attributes: {
                 // CustomTabs from managed packages are identified by their
                 // namespace prefix followed by two underscores followed by the
                 // developer name. E.g. 'namespace__TabName'
                 apiName: 'CustomTabName'
             }
         });
     }

7. navigateToWebPage: Below snippet shows how to navigate to the web page.

navigateToWebPage() {
         // Navigate to a URL
         this[NavigationMixin.Navigate]({
             type: 'standard__webPage',
             attributes: {
                 url: 'http://salesforce.com'
             }
         },
         true // Replaces the current page in your browser history with the URL
       );
     }

To sum up Now the complete code for Lightning Navigation Service in LWC will be:

navigation-Service-Example.html

<template>
       <lightning-button variant="brand" label=navigateNext title=navigateNext onclick={navigateNext}></lightning-button>
     <lightning-button label="Navigate To Case Obejct Home Page" onclick={navigateToObjectHome}></lightning-button>
     <lightning-button label="Navigate To Contact object's Recent list view" onclick={navigateToListView}></lightning-button>
     <lightning-button label="New Account" onclick={navigateToNewRecordPage}></lightning-button>
     <lightning-button label="Custom Object Record" onclick={navigateToRecordViewPage}></lightning-button><!-- Change the Record Id -->
     <lightning-button label="Edit Account" onclick={navigateToRecordEditPage}></lightning-button>
     <lightning-button label="CaseComments related list page" onclick={navigateToRelatedList}></lightning-button>
     <lightning-button label="Navigate To Tab" onclick={navigateToTabPage}></lightning-button>
     <lightning-button label="Navigate To WebPage" onclick={navigateToWebPage}></lightning-button>
 </template>

navigation-Service-Example.js

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

export default class Navtab extends NavigationMixin(LightningElement) {
@api tabName;
@api label;
navigateNext() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: this.tabName,
            }
        });
    }

navigateToObjectHome() {
    // Navigate to the Case object home page.
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Case',
            actionName: 'home'
        }
    });
}

navigateToListView() {
    // Navigate to the Contact object's Recent list view.
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Contact',
            actionName: 'list'
        },
        state: {
            // 'filterName' is a property on the page 'state'
            // and identifies the target list view.
            // It may also be an 18 character list view id.
            filterName: 'Recent' // or by 18 char "00BT0000002TONQMA4"
        }
    });
}

navigateToNewRecordPage() {
    // Opens the new Account record modal
    // to create an Account.
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'new'
        }
    });
}

navigateToRecordViewPage() {
    // View a custom object record.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: "a03B0000002tEurIAE",
            objectApiName: 'namespace__ObjectName', // objectApiName is optional
            actionName: 'view'
        }
    });
}

navigateToRecordEditPage() {
    // Opens the Account record modal
    // to view a particular record.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: "001B000000ZBz22IAD",
            objectApiName: 'Account', // objectApiName is optional
            actionName: 'edit'
        }
    });
}

navigateToRelatedList() {
    // Navigate to the CaseComments related list page
    // for a specific Case record.
    this[NavigationMixin.Navigate]({
        type: 'standard__recordRelationshipPage',
        attributes: {
            recordId: '500xx000000Ykt4AAC',
            objectApiName: 'Case',
            relationshipApiName: 'CaseComments',
            actionName: 'view'
        }
    });
}

navigateToTabPage() {
    // Navigate to a specific CustomTab.
    this[NavigationMixin.Navigate]({
        type: 'standard__navItemPage',
        attributes: {
            // CustomTabs from managed packages are identified by their
            // namespace prefix followed by two underscores followed by the
            // developer name. E.g. 'namespace__TabName'
            apiName: 'CustomTabName'
        }
    });
}

navigateToWebPage() {
    // Navigate to a URL
    this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: {
            url: 'http://salesforce.com'
        }
    },
    true // Replaces the current page in your browser history with the URL
  );
}
}

navigation-Service-Example.js-meta.xml

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

In addition, to Get Started with Salesforce Lightning Web Components,Getting Started with Lightning Web Components and SalesforceDX.

Moreover, If you have any suggestions or issue with the post, you can reply in the comment box.

Support: For any further Salesforce support/ customisations, Chat with us