Configure Components for Custom Tabs

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.

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>58.0</apiVersion>
4   <targets>
5     <target>lightning__Tab</target>
6  </targets>
7</LightningComponentBundle>

The lightning__Tab target doesn’t support the property and supportedFormFactor tags.

Note

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.

1navigateToTab() {
2        this[NavigationMixin.Navigate]({
3            type: 'standard__navItemPage',
4            attributes: {
5                apiName: 'My_Custom_Tab'
6            }
7        });
8    }

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