Page Navigation

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'
            }
        });
    }
}

<template>
    <lightning-card title="NavToHome">
        <lightning-button
            label="Go to Home"
            onclick={navigateToHome}
        ></lightning-button>
    </lightning-card>
</template>

Source: navToHome.js:5

Navigate to Chatter Home

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'
            }
        });
    }
}

<template>
    <lightning-card title="NavToChatterHome">
        <lightning-button
            label="Go to Chatter"
            onclick={navigateToChatter}
        ></lightning-button>
    </lightning-card>
</template>

Source: navToChatterHome.js:7

Navigate to Files Home

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'
            }
        });
    }
}

<template>
    <lightning-card title="NavToFilesHome">
        <lightning-button
            label="Go to Files"
            onclick={navigateToFilesHome}
        ></lightning-button>
    </lightning-card>
</template>

Source: navToFilesHome.js:4

Files home uses standard__objectPage with ContentDocument as the object API name and home as the action.

Navigate to Custom Tab

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'
            }
        });
    }
}

<template>
    <lightning-card title="NavToHelloTab">
        <lightning-button
            label="Go to Hello Tab"
            onclick={navigateToHelloTab}
        ></lightning-button>
    </lightning-card>
</template>

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.

string

required

Must be standard__namedPage

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.

string

required

Must be standard__navItemPage

string

required

The API name of the custom tab

standard__objectPage (for home)

Navigate to object home pages.

string

required

Must be standard__objectPage

string

required

The API name of the object (e.g., ‘ContentDocument’ for Files)

string

required

Must be home for object home pages

Summary Table

Destination	Type	Attributes
Home Page	`standard__namedPage`	`pageName: 'home'`
Chatter	`standard__namedPage`	`pageName: 'chatter'`
Files	`standard__objectPage`	`objectApiName: 'ContentDocument'`, `actionName: 'home'`
Custom Tab	`standard__navItemPage`	`apiName: '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.

Navigate to Records - Navigate to record pages
Navigate to List Views - View filtered lists

Get Started

Basics

Component Composition

Event Handling

Data Access

Component Features

Navigation

Styling

Advanced Topics

Guides

Overview

Navigation Types

Named Pages

Custom Tabs

Object Home Pages

Navigate to Home Page

Navigate to Chatter Home

Navigate to Files Home

Navigate to Custom Tab

PageReference Types for Pages

standard__namedPage

standard__navItemPage

standard__objectPage (for home)

Summary Table

Headless Action Example

​Overview

​Navigation Types

Named Pages

Custom Tabs

Object Home Pages

​Navigate to Home Page

​Navigate to Chatter Home

​Navigate to Files Home

​Navigate to Custom Tab

​PageReference Types for Pages

​standard__namedPage

​standard__navItemPage

​standard__objectPage (for home)

​Summary Table

​Headless Action Example

​Related Examples

Overview

Navigation Types

Navigate to Home Page

Navigate to Chatter Home

Navigate to Files Home

Navigate to Custom Tab

PageReference Types for Pages

standard__namedPage

standard__navItemPage

standard__objectPage (for home)

Summary Table

Headless Action Example

Related Examples