lightning tab

How To Custom Create Lightning Tabs In Lightning Component

Lightning Component
Prerequisites : basic understanding of Lightning Component and JavaScript.

In lightning components we can create two types of Tabs-:

  • Default Tab
  • Scoped Tab

we can make Tabs dynamic by using JavaScript in lightning component.

Method 1 [ Default tab]

In this method one we are use $A.util.addClass() and $A.util.removeClass() for make tabs dynamic.

Tabs dynamic
Default Tabs dynamic looks like….

TabComponent.cmp

TabComponentController.js

In above TabComponentController.js  we have 3 method for each tab.

  • in all 3 method first we get all tab list items and all tab data by aura:id.
  • then using $A.util.addClass() and $A.util.removeClass() dynamic show and hide tab and tab data.

TestApp.app


Method 2 [ Scoped tab]

In this method 2 we will use different JavaScript code for make tabs dynamic.

Tabs dynamic
Scoped Tabs dynamic looks like…

TabComponent.cmp

TabComponentController.js

TabComponentHelper.js

TestApp.app

Learn more  -: https://www.lightningdesignsystem.com/components/tabs/

https://www.lightningdesignsystem.com/components/scoped-tabs/

Like our facebook page for new post updates.?

(Visited 12,047 times, 1 visits today)

8 comments

  • Thank you so much, for this post. I was so helpful.

    I tried to use the <lightning:tabset> but that seems to still be in beta so a little buggy and some other examples I followed kept buggy out as well. So this was a very clean solution.

    Thanks again

  • sfdcmonkey thanks for this! QQ: What needs to change if I was putting this lightning component on several pages to make sure the corresponding page tab was highlighted? I have updated the href to the URL of each page and put the component on each page but in its current form each page the Fruits Name tab is highlighted on the Fruits page, the Vegetable page and the Color page.

  • Specifically a Lightning Community. I have several custom pages that I have placed the Lightning Tab component on and an href to each page for each tab in the code. I need to make sure that the right tab is active on the right page.

     

  • Hello  SFDCMonkey ,

    First of all , I just want say , THANK YOU SO MUCH .
    your blog is amazing and It’s very helpful for me everytime. Always I visit first your  blog when i stuck somewhere on lightning.
    but if you don’t mind , I want to say for this above code. in this controller on 62 no. line , I think you just forgot  to add this line .
    $A.util.removeClass(TabThreeData, ‘slds-hide’);

    on this controller  TabComponentController.js

    Because of  this line  isn’t  present above into the controller TabComponentController.js  , We can’t zble to see third tab content which we have defined on the component for colortab.

    Please add this line , So you code will be perfect as that’s always.

    Thank You So Much Again.
    Manish Mourya

Leave a Reply