Add Lightning Web Components as Custom Tabs

Make a Lightning web component available as a custom tab in a Lightning Experience app and in the Salesforce app.

Where: This change applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

How:

  1. Add the lightning__Tab target to the component’s configuration file. The <component>.js-meta.xml configuration file defines the metadata values for the component, including the setting to allow usage in a custom tab.
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <targets>
            <target>lightning__Tab</target>
        </targets>
    </LightningComponentBundle>
  2. Create a custom tab for this component.
  3. To display the component in a custom tab:
    • For a Lightning Experience app, add the component to the App Launcher.
    • For the Salesforce mobile app, add the component to the Salesforce app navigation menu.