Creating Custom Tabs for Lightning Web Components

Create a Lightning web component and add it as a custom tab in the App Launcher and navigation menu.

  • Create a new Lightning web component:
    • Name: myComponent
  • Add a lightning-card to myComponent:
    • Title: Hello
  • Add a lightning-button to the Hello lightning-card (Note: make sure the button lives in the “actions” slot):
    • Label: New
  • Add a footer paragraph to the Hello lightning-card:
    • Text: Footnote
  • Add myComponent as a new custom tab:
    • Name: Words

Before you begin, you must update the configuration file to allow for custom tabs.

Copy the following code and paste it into notepad and save it as myComponent.js-meta.xml

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

Use workbench to deploy the lightning component bundle to your org.