To use a Lightning web component as a custom tab in Lightning Experience or in the Salesforce mobile app, add the tab target in the component’s configuration file.
The componentName.js-meta.xml
file defines the metadata values for the component, including the setting to allow usage in a custom tab. Add the lightning__Tab
target to the component’s configuration file.
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>58.0</apiVersion> <targets> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
The lightning__Tab
target doesn't support the property
and supportedFormFactor
tags.
After you configure the tab target, add your Lightning web component as a custom tab in Lightning Experience or the Salesforce mobile app. When the component is available as a custom tab in your app, you can navigate to the tab using the standard__navItemPage
page reference type.
navigateToTab() { this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { apiName: 'My_Custom_Tab' } }); }
The apiName
of the custom tab corresponds to the tab name. If you enter the tab label "My Custom Tab" when creating your custom tab, the tab name is "My_Custom_Tab".
See Also