In this post, we will implement Tabs in LWC to create Custom Tab using (LWC) Lightning Web Component. Let’s just hop into the implementation.
Implementation
In this implementation, we will create a Lightning Web Component to create an Account Record. We will open this Lightning Web Component as a Custom Tab in Lightning.
First, create a Lightning Web Component lwcCmp and use lightning-record-form to create and display Account records. If you want to know how to use lightning-record-form in Lightning Web Component, you can check the complete implementation here.
This is how our component will look:
lwcCmp.html
<template> <lightning-card title="Custom Tab using Lightning Web Component"> <div class="slds-p-horizontal_small"> <lightning-record-form object-api-name="Account" record-id={strRecordId} columns="2" mode="edit" fields={arrayFields}></lightning-record-form> </div> </lightning-card> </template>
lwcCmp.js
import { LightningElement } from 'lwc'; export default class LwcCmp extends LightningElement { strRecordId; arrayFields = ['Name', 'Type', 'Phone', 'AccountNumber', 'Website']; }
Lightning Web Component (LWC) as Custom Tab
Now, to use Lightning Web Component as Custom Tab, we need to update the metadata file for the component and add target as lightning__Tab. Our metadata file should look like below:
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>48.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
With target as lightning__Tab, we have enabled our Lightning Web Component to use as a Custom Tab. Now, we need to create a Tab itself.
Go to Tabs From Quick Find box, click New under Lightning Component Tabs, and select c:lwcCmp component for the Lightning Component select list along with other required fields. Click Save.
The Custom Tab should look something like below:

Once the Tab is created, add this Tab in Navigation Items either by editing an App or from Personalize your nav bar. And we are Done.
This is how our implementation will look:

If you don’t want to miss new implementations, please Subscribe here.
If you want to check more implementations using Lightning Web Components, you can check it here.
Below are some hand-picked implementations for you:
- Lightning Message Service (LMS) – Future of Communication
- Handling Events of LWC in Aura Component
- template if:true in LWC with Conditional Statements
See you in the next implementation!