Introduction

The Navigation Service allows navigating to tabs, record pages, list views, related lists, external sites and opening and downloading files in Lightning Experience and the Salesforce App.

<aside> 📢 The lightning/navigation service is supported only in Lightning Experience, Lightning communities, and the Salesforce app.

</aside>

This is done programmatically by leveraging these concepts:

1. URL are not used to navigate to another page, but instead a Javascript object that is called PageReference . The PageReference is a special object that represents the current page's URL and state.
2. The NavigationMixin functions allow to execute the navigation action.

<aside> 📢 The term "Mixin" in the name NavigationMixin refers to a design pattern called mixin that is used in object-oriented programming. A mixin is a way to extend the functionality of a class by adding methods or properties from another class without explicitly inheriting from that class. By using the NavigationMixin class as a mixin, you can enhance your own custom components with navigation functionality.

</aside>

Page Reference

A PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page.

<aside> 📢 Notice, that you navigate with the methods in the NavigationMixin using Page References, not URLs.

</aside>

This is an example of a Page Reference for the Wire tab:

{
  "type": "standard__navItemPage",
  "attributes": {
    "apiName": "Wire"
  },
  "state": {}
}

This is for the Home Page:

{
    "type": "standard__namedPage",
    "attributes": {
        "pageName": "home"
    }
}

This would be used to navigate to a new Contact dialog:

{
    "type": "standard__objectPage",
    "attributes": {
        "objectApiName": "Contact",
        "actionName": "new"
    }
}

<aside> 📢 For a complete detail on how to specify a Page Reference, review this page https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_page_reference_type

</aside>

Example: getting the current page reference

import { CurrentPageReference } from 'lightning/navigation';

@wire(CurrentPageReference)
pageRef;

get currentPageReference() {
    return this.pageRef ? JSON.stringify(this.pageRef, null, 2) : '';
}