Lightning Tab Navigation With Buttons In Salesforce LWC

In salesforce custom lightning tabs keeps respective content in a single container that is shown and hidden through navigation. and only one tab can be visible at a time.

Today In this post, we are going to learn that how we can do navigation throughout the custom lightning tabs with next and back buttons in salesforce lightning web component.

View As Aura Component

Let’s first create a new lightning web component called : “tabWithNavigation”.

Html file : tabWithNavigation.html

<template>    
    <lightning-card title="Lightning Tab Navigation With Buttons (lwcFactory.com)">

        <!--Group Of lightning Tab Set-->
    <lightning-tabset active-tab-value={activeTab}>
         <div class="slds-m-around_x-small">
            <lightning-tab label="Account"  value="1" onactive={handleActive}>
                Account Dummy Data...                
            </lightning-tab>
           
            <lightning-tab label="Contact"  value="2" onactive={handleActive}>
                Contact Dummy Data...
            </lightning-tab>
           
            <lightning-tab label="Case"  value="3" onactive={handleActive}>
                Case Dummy Data...
            </lightning-tab>
           
            <lightning-tab label="Opportunity"  value="4" onactive={handleActive}>
                Opportunity Dummy Data...
            </lightning-tab>
        </div>
    </lightning-tabset>
    
    <!--Navigation Button on card footer-->
    <div slot="footer">      
        <lightning-button variant="brand" label="Back" disabled={bDisableBackBtn} onclick={goBack}></lightning-button>
        <lightning-button variant="brand" label="Next" disabled={bDisableNextBtn} onclick={goNext} class="slds-m-left_x-small"></lightning-button>
    </div>
</lightning-card>
</template>

JavaScript File : tabWithNavigation.js

import { LightningElement } from 'lwc';
export default class TabWithNavigation extends LightningElement {
   // Js Properties start
    activeTab = '1';

    get bDisableBackBtn(){
        return Number(this.activeTab) == 1 ? true : false;
    }

    get bDisableNextBtn(){
        return Number(this.activeTab) == 4 ? true : false;
    }

    // JS functions start 
    handleActive(event) {
     this.activeTab = event.target.value;
    }
    
    goBack(){
        let activeTabValue = Number(this.activeTab) - 1;
        this.activeTab = activeTabValue.toString();
      }

    goNext(){
      let activeTabValue = Number(this.activeTab) + 1;
      this.activeTab = activeTabValue.toString();
    }
    // JS functions end    
}

Meta Xml File : tabWithNavigation.js-meta.xml

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

Lightning Tab Navigation With Buttons Output :

Related Resources:

• lightning-tabs
• lightning-tabset
• lightning-card
• lightning-button

More From Blog :

• Custom Reusable Lookup Component In Salesforce LWC
• 2 Ways to Implement Salesforce Modal In Lightning Web Component
• How To Use jQuery Data Table In Salesforce Lightning Web Component

Sharing is caring ❤️