Skip to main content

​
Overview

Page navigation allows you to navigate to standard Salesforce pages like the home page, Chatter, Files, and custom tabs. This is useful for creating custom navigation experiences in your Lightning Web Components.

Named Pages

Navigate to standard Salesforce pages like Home, Chatter, and more

Custom Tabs

Navigate to custom tabs defined in your Salesforce org

Object Home Pages

Navigate to object home pages like Files

​
Navigate to Home Page

Navigate to the Salesforce home page using the standard__namedPage type. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavToHome extends NavigationMixin(LightningElement) {
    navigateToHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            }
        });
    }
}
Source: navToHome.js:5 Navigate to the Chatter home page. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavToChatterHome extends NavigationMixin(
    LightningElement
) {
    navigateToChatter() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            }
        });
    }
}
Source: navToChatterHome.js:7 Navigate to the Files home page using the standard__objectPage type. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavToFilesHome extends NavigationMixin(LightningElement) {
    navigateToFilesHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'ContentDocument',
                actionName: 'home'
            }
        });
    }
}
Source: navToFilesHome.js:4
Files home uses standard__objectPage with ContentDocument as the object API name and home as the action.
Navigate to a custom tab using the standard__navItemPage type. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavToHelloTab extends NavigationMixin(LightningElement) {
    navigateToHelloTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'Hello'
            }
        });
    }
}
Source: navToHelloTab.js:5
The custom tab must exist in your org and the user must have permission to access it.

​
PageReference Types for Pages

​
standard__namedPage

Navigate to standard Salesforce named pages.
​
type
string
required
Must be standard__namedPage
​
attributes.pageName
string
required
The name of the page to navigate to
Common Page Names:
  • home - Salesforce home page
  • chatter - Chatter home page

​
standard__navItemPage

Navigate to custom tabs.
​
type
string
required
Must be standard__navItemPage
​
attributes.apiName
string
required
The API name of the custom tab

​
standard__objectPage (for home)

Navigate to object home pages.
​
type
string
required
Must be standard__objectPage
​
attributes.objectApiName
string
required
The API name of the object (e.g., ‘ContentDocument’ for Files)
​
attributes.actionName
string
required
Must be home for object home pages

​
Summary Table

DestinationTypeAttributes
Home Pagestandard__namedPagepageName: 'home'
Chatterstandard__namedPagepageName: 'chatter'
Filesstandard__objectPageobjectApiName: 'ContentDocument', actionName: 'home'
Custom Tabstandard__navItemPageapiName: 'YourTabName'

​
Headless Action Example

You can also use navigation in headless actions (components without UI that can be invoked from Quick Actions).
navigateToRecordHeadlessAction.js
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigateToRecordHeadlessAction extends NavigationMixin(
    LightningElement
) {
    @api invoke() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'home'
            }
        });
    }
}
Source: navigateToRecordHeadlessAction.js:7
Headless actions are useful for creating Quick Actions that perform navigation without displaying a UI.

Build docs developers (and LLMs) love

Get started for freeTalk to us