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….



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.

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…




Learn more  -:

Like our facebook page for new post updates.?


Leave a Reply