The navigation service supports different kinds of pages in Lightning. Each PageReference type supports a different set of attributes and state properties. Both APIs support these PageReference types.
Let’s look at an example of how to create a button that navigates to a page.
Our sample has a welcome component, which is a page in a Salesforce app. At the bottom of the page, there’s a navtab component with the label Next. The navtab component can be used at the bottom of each page to let the user navigate through the app.
1<!-- welcome.html -->
2<!-- lots and lots of code removed for brevity -->
3
4<div class="slds-m-vertical_large">
5 <c-navtab tab-name="lightning_components" label="Next"></c-navtab>
6</div>The c-nav-tab component customizes the lightning-button component to navigate to the next page in the app. The consumer specifies a tab-name and a label.
1<!-- navTab.html -->
2<template>
3 <lightning-button variant="brand" label={label} title={label} onclick={navigateNext}>
4 </lightning-button>
5</template>1// navTab.js
2import { LightningElement, api } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class Navtab extends NavigationMixin(LightningElement) {
6 @api tabName;
7 @api label;
8 navigateNext() {
9 this[NavigationMixin.Navigate]({
10 type: "standard__navItemPage",
11 attributes: {
12 apiName: this.tabName,
13 },
14 });
15 }
16}The lwc-recipes repo has lots of navigation examples. Check out the components named nav*.
Tip
This code shows examples of navigating to different types of pages in Lightning. These examples show how to create page reference objects of different types and navigate to those pages. You can also pass page references to the [NavigationMixin.GenerateUrl](pageReference) API to retrieve a promise that resolves to a URL for the page.
1// navigationToPagesExample.js
2import { LightningElement, wire } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavigationToPagesExample extends NavigationMixin(LightningElement) {
6 navigateToObjectHome() {
7 // Navigate to the Case object home page.
8 this[NavigationMixin.Navigate]({
9 type: "standard__objectPage",
10 attributes: {
11 objectApiName: "Case",
12 actionName: "home",
13 },
14 });
15 }
16
17 navigateToListView() {
18 // Navigate to the Contact object's Recent list view.
19 this[NavigationMixin.Navigate]({
20 type: "standard__objectPage",
21 attributes: {
22 objectApiName: "Contact",
23 actionName: "list",
24 },
25 state: {
26 // 'filterName' is a property on the page 'state'
27 // and identifies the target list view.
28 // It may also be an 18 character list view id.
29 filterName: "Recent", // or by 18 char '00BT0000002TONQMA4'
30 },
31 });
32 }
33
34 navigateToNewRecordPage() {
35 // Opens the new Account record modal
36 // to create an Account.
37 this[NavigationMixin.Navigate]({
38 type: "standard__objectPage",
39 attributes: {
40 objectApiName: "Account",
41 actionName: "new",
42 },
43 });
44 }
45
46 navigateToRecordViewPage() {
47 // View a custom object record.
48 this[NavigationMixin.Navigate]({
49 type: "standard__recordPage",
50 attributes: {
51 recordId: "a03B0000002tEurIAE",
52 objectApiName: "namespace__ObjectName", // objectApiName is optional
53 actionName: "view",
54 },
55 });
56 }
57
58 navigateToRecordEditPage() {
59 // Opens the Account record modal
60 // to view a particular record.
61 this[NavigationMixin.Navigate]({
62 type: "standard__recordPage",
63 attributes: {
64 recordId: "001B000000ZBz22IAD",
65 objectApiName: "Account", // objectApiName is optional
66 actionName: "edit",
67 },
68 });
69 }
70
71 navigateToRelatedList() {
72 // Navigate to the CaseComments related list page
73 // for a specific Case record.
74 this[NavigationMixin.Navigate]({
75 type: "standard__recordRelationshipPage",
76 attributes: {
77 recordId: "500xx000000Ykt4AAC",
78 objectApiName: "Case",
79 relationshipApiName: "CaseComments",
80 actionName: "view",
81 },
82 });
83 }
84
85 navigateToTabPage() {
86 // Navigate to a specific CustomTab.
87 this[NavigationMixin.Navigate]({
88 type: "standard__navItemPage",
89 attributes: {
90 // CustomTabs from managed packages are identified by their
91 // namespace prefix followed by two underscores followed by the
92 // developer name. E.g. 'namespace__TabName'
93 apiName: "CustomTabName",
94 },
95 });
96 }
97
98 navigateToWebPage() {
99 // Navigate to a URL
100 this[NavigationMixin.Navigate](
101 {
102 type: "standard__webPage",
103 attributes: {
104 url: "http://salesforce.com",
105 },
106 },
107 true, // Replaces the current page in your browser history with the URL
108 );
109 }
110}See Also
Release Preview
j