lightning tab with button navigation

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

lightning tab with navigation button
Lightning Tab Navigation With Buttons Output

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 :

lightning tab with navigation button

Related Resources:

More From Blog :

Sharing is caring ❤️

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *