Dynamic multiple tabs in lwc Salesforce - Salesforce Globe For You

 Dynamic multiple tabs in lwc Salesforce  - Salesforce Globe For You 

LWC Component: dynamicTabsInLWC

dynamicTabsInLWC.html

<template>

    <lightning-tabset>

        <template for:each={lstTabs} for:item="tab">

            <lightning-tab label={tab.Name} key={tab.Name}>

                {tab.Id}

            </lightning-tab>

        </template>

    </lightning-tabset>

</template>

dynamicTabsInLWC.js

import { LightningElement,track } from 'lwc';

export default class DynamicTabsInLWC extends LightningElement {

    @track lstTabs = [

        {

            Id: 1,

            Name: 'Tab 1'

        },

        {

            Id: 2,

            Name: 'Tab 2'

        },

        {

            Id: 3,

            Name: 'Tab 3'

        },

    ];

    

}

dynamicTabsInLWC.js-meta.xml

<?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__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Note:dynamically populate lstTabs variaable as per your requirement.

Output: