Navigation Mechanism in Lightning Web Component

Navigation Mechanism is the way to redirect a new web page, new record, edit record, record detail page etc. without using Apex Class.

We have created one Lightning Web Component named “lightningNavigation“.

Step 1: Need to update the lightningNavigation.js-meta.xml file to set the visibility in Lightning App Builder.

lightningNavigation.js-meta.xml

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

Step 2: Need to write html file.

lightningNavigation.html

<template>
        <lightning-card title="Navigation System">    
                <lightning-layout multiplerows="true" verticalalign="center">                        
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="brand" label="Current Tab" title="Current Tab" onclick={navigateCurrentTab}>
                                </lightning-button>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="brand" label="Object Home" title="Object Home" onclick={navigateToObjectHome}>
                                </lightning-button>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="brand" label="List View" title="List View" onclick={navigateToListView}>
                                </lightning-button>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="brand" label="View Record" title="View Record" onclick={navigateToRecordView}>
                                </lightning-button>
                        </lightning-layout-item>
                </lightning-layout>
                <lightning-layout multiplerows="true" verticalalign="center">
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="success" label="New Record" title="New Record" onclick={navigateToNewRecord}>
                                </lightning-button> 
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">            
                                <lightning-button variant="success" label="Edit Record" title="Edit Record" onclick={navigateToRecordEditPage}>
                                </lightning-button>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="success" label="Related List View" title="Related List View" onclick={navigateToRelatedList}>
                                </lightning-button>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="3">
                                <lightning-button variant="success" label="Web Page" title="Web Page" onclick={navigateToWebPage}>
                                </lightning-button>
                        </lightning-layout-item>                    
                </lightning-layout>
        </lightning-card>
</template>

Step 3: We have updated the JS file according to the navigation procedure.

lightningNavigation.js

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

export default class LightningNavigation extends NavigationMixin(LightningElement) {

    navigateCurrentTab(){
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: "LWC",                
            }
        });
    }

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

    navigateToListView(){
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                "objectApiName": "Contact",
                "actionName": "list"          
            },
            state: {
                filterName: 'Recent'
            }
        });
    }

    navigateToNewRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'new'
            }
        });
    }

    navigateToRecordView() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: "0030o00002dCDi7AAG",
                objectApiName: 'Contact', // objectApiName is optional
                actionName: 'view'
            }
        });
    }

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

    navigateToRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: '0010o00002Dw6eGAAR',
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            }
        });
    }

    navigateToWebPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: 'https://www.salesforce.com'
            }
        })        
    }
}

Step 4: Then, we have added the component into the Lightning App Page.

Result