Tune in to Trailblazers Innovate for Salesforce product news,
demos, and latest roadmaps. Register here.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Get Hands-on Creating Custom Tabs for Lightning Web Components

Learning Objectives

After completing this unit, you’ll be able to:

  • Add Lightning Web Components as Custom Tabs.
  • Maintain your Platform Developer I certification.

Add Lightning Web Components as Custom Tabs

With the Winter ’20 release, you can make a Lightning web component available as a custom tab in a Lightning Experience app and in the Salesforce app.

If you’ve ever worked with Lightning Web Components (LWC), you know that the <component>.js-meta.xml configuration file defines the metadata values for the component. To allow the component to be used in Lightning App Builder, set isExposed to true and define the <target>, which is a type of Lightning page. Adding the lightning__Tab target to the component’s configuration file allows its usage in a custom tab.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>

Once you’ve deployed this Lightning web component to an org, you can create its custom tab in the Setup menu by clicking the New button next to Lightning Component Tabs.     Custom Tabs setup screen showing that Lightning Component tabs allows you to add Lightning components to the navigation menu.

Easy as pie!

Resources

Get Ready for the Hands-on Challenge

In the hands-on challenge, you create a Lightning web component and add it as a custom tab in the App Launcher. As part of this challenge, you’ll need to be familiar with Lightning Web Components (LWC). 

If you’re comfortable using Lightning Web Components (LWC), you can start working on the hands-on challenge. You can also learn to build Lightning Web Components by completing the Lightning Web Components Basics module. 

Working with Lightning Web Components is a developing skill for many platform developers, and we encourage you to learn these new skills. However, if you’ve never worked with Lightning Web Components before and aren’t ready to learn about them, you can install an unmanaged package that already contains the Lightning Web Component. To launch your playground and install the package, follow the instructions below.

Note

Note

We will not provide Lightning Web Components solutions in future maintenance modules.

Launch your Trailhead Playground by scrolling to the bottom of this page and clicking Launch. If you see a tab in your org labeled Install a Package, great. Follow the steps below. 

If not, click App Launcher  to launch the App Launcher, then click Playground Starter and follow the steps. If you don’t see the Playground Starter app, copy this package installation link and check out Install a Package or App to Complete a Trailhead Challenge on Trailhead Help.

  1. Click the Install a Package tab.
  2. Paste 04t1v0000021k2c into the field.
  3. Click Install.
  4. Select Install for Admins Only, then click Install.

When your package is finished installing, you see a confirmation page and get an email to the address associated with your playground.