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.

<?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.

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.

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

The Summer '25 guide is now live

Looking for the Component Reference? Go to https://developer.salesforce.com/docs/component-library/.