Vertical Tabs in Salesforce Lightning Web Component

Vertical Tabs in Salesforce Lightning Web Component

In lightning-tabset, we can set variant as vertical for vertical Tabs alignment in Salesforce Lightning Web Component.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card class="slds-p-around_small">
        <lightning-tabset variant="vertical">
            <lightning-tab label="Tab 1">
                Test Content Tab 1
            </lightning-tab>
            <lightning-tab label="Tab 2">
                Test Content Tab 2
            </lightning-tab>
            <lightning-tab label="Tab 3">
                Test Content Tab 3
            </lightning-tab>
            <lightning-tab label="Tab 4">
                Test Content Tab 4
            </lightning-tab>
            <lightning-tab label="Tab 5">
                Test Content Tab 5
            </lightning-tab>
        </lightning-tabset>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class TrainingComponent extends LightningElement {
    
}

js-meta.xml:

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

Output:

Leave a Reply