Navigation

NavigationMixin lets a component navigate to a record, a list view, a custom tab, or an external URL without hard-coding paths.

Page references

A page reference is an object with type, attributes, and optional state. The type says where you are going: standard__recordPage for a record, standard__objectPage for a list view, standard__navItemPage for a custom tab.

The attributes hold the details: recordId, objectApiName, actionName (view, edit, new). The state holds query parameters.

Navigating

Extend your component with NavigationMixin(LightningElement). Then call this[NavigationMixin.Navigate](pageReference) from a handler.

To generate a URL without navigating, use this[NavigationMixin.GenerateUrl](pageReference). It returns a promise that resolves to the URL string.

External URLs and web pages

Use type standard__webPage with url in attributes to open an external URL. The platform opens it in a new tab.

For named pages like the login page or the home page, use standard__namedPage with pageName: 'home'.

Example

javascript

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

export default class GoToRecord extends NavigationMixin(LightningElement) {
  navigateToAccount(event) {
    this[NavigationMixin.Navigate]({
      type: 'standard__recordPage',
      attributes: {
        recordId: event.target.dataset.id,
        objectApiName: 'Account',
        actionName: 'view',
      },
    });
  }
}

• Navigate to pages