
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.

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:
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 ❤️

Ravi is a salesforce developer based in Jaipur, India. Focused on salesforce development especially LWC applications. Been working in SFDC development since 2019 and still learning and sharing everyday.
#LWC #Apex #Salesforce
One thought on “Lightning Tab Navigation With Buttons In Salesforce LWC”