Introduction

The main concept included in this recipe is navigating to another tab of the App.

<aside> 💡 If you are not familiar with the term Page Reference or the functions provided by the lightning/navigation service, review this section Navigation .

</aside>

<aside> 📂 Find this LWC in this folder: ****force-app/main/default/lwc/navToHelloTab.

</aside>

Template file

The template shows a button that executes the navigateToHelloTab handler.

...	
	<lightning-button
      label="Go to Hello tab"
      class="slds-var-m-around_medium"
      onclick={navigateToHelloTab}
  ></lightning-button>
...

Javascript file

In the import section, only 1 module is imported:

//This import is providing the Navitation APIs
import { NavigationMixin } from 'lightning/navigation';

Quite unusual in LWC development, instead of using the API functions from an external module, here the extends NavigationMixin is used to inherit the properties and methods of the NavigationMixin class.

By extending NavigationMixin, the NavToHelloTab class gains access to the navigation-related functionalities provided by the NavigationMixin class.

...
export default class NavToHelloTab extends NavigationMixin(LightningElement) {
...

The most important part comes in the button handler: the Navigate function from the NavigationMixin API is invoked as a class method, using this.

This is due to the NavigationMixin functions are inherited.

The values in the Page reference object for jumping to the Tab Page are standard__navItemPage and Hello as the value for apiName.

...
	navigateToHelloTab() {
	    this[NavigationMixin.Navigate]({
	        type: 'standard__navItemPage',
	        attributes: {
	            apiName: 'Hello'
	        }
	    });
	}
...

Notice the difference with the previous LWC, where is used pageName instead of apiName.

Finally, the Navigate function is execution and the navigation executed.

<aside> 📢 For a complete detail on how to specify a Page Reference, review this page https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_page_reference_type

</aside>