How to apply navigationmixin.navigate for navigate to different page like create new account record, web external url, visualforce page, contact list view, new tab and reports page uses of Navigation Service Library (NavigationMixin) in Lightning Web Component — LWC | apply navigationmixin for navitate to different page types like Navigate to Pages, Records, Lists, Visualforce, Tabs, Reports & web external url in LWC

3 min readNov 11, 2021

Hey guys, today in this post we are going to learn about How to apply navigationmixin.navigate for navigate to different page like create new account record, web external url, visualforce page, contact list view, new tab and reports page uses of Navigation Service Library (NavigationMixin) in Lightning Web Component (LWC).

The lightning/navigation service is supported only in Lightning Experience, Experience Builder sites, and the Salesforce mobile app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce mobile app. To know more details about lightning/navigation service, Click Here.

Files we used in this post example →

lwcNavigateAction.html

LWc HTML File

Template HTML file to create Navitate to different page types in Salesforce Lightning Web Component (LWC)

lwcNavigateAction.js

LWC JavaScript File

It’s hold a javascript on click function to Navitate page on click button in lwc.

lwcNavigateAction.js-meta.xml

XML Meta File

It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage.

Final Output → To find source code link, click here..

Other related post that would you like to learn in LWC

Create Lightning Web Component HTML

Step 1:- Create Lightning Web Component : lwcNavigateAction.html

SFDX:Lightning Web Component >> New >> lwcNavigateAction.html

lwcNavigateAction.html [Lightning Web Component HTML]

Create Lightning Web Component JavaScript

Step 2:- Create Lightning Web Component : lwcNavigateAction.js

SFDX:Lightning Web Component >> New >> lwcNavigateAction.js

lwcNavigateAction.js [LWC JavaScript File]

Create Lightning Web Component Meta XML

Step 3:- Create Lightning Web Component : lwcNavigateAction.js-meta.xml

SFDX:Lightning Web Component >> New >> lwcNavigateAction.js-meta.xml

lwcNavigateAction.js-meta.xml [LWC Meta Data XML]

Lightning Web Component Meta XML

Further post that would you like to learn in LWC Flyout is a free, simple way to earn money.

If you think you and your family members also like to earn money in additional time, then go this link. In this site, you can earn money for the lifetime at low effort. To Earn Unlimited Everyday With This Trick, Sign Up Free.. Get Started for Free

Flyout is a free, simple way to earn money by placing sponsored content on your blog

Check Out:- Earn Unlimited Everyday With This Trick:- Click Here