I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/tabs/#scoped 

I will be hand-coding the markup. The HTML makes sense. But I see in the description on the web page, it has some 'javascript needs' to move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Does that mean it requires me to write custom javascript? 

enter image description here

  • 2
    Yes. Unfortunately the SLDS is a CSS only framework and doesn't include any JavaScript to go with it. Thus there are many instances where you need to write your own JS.
    – dBeltowski
    May 3, 2016 at 20:41

3 Answers 3


Per the documentation


The active tab has two markup requirements:

  • The .slds-active class should be placed on the li with .tabs--{variant}__item.
  • The corresponding .tabs--{variant}__content container receives .slds-show.

Inactive .tabs--{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.

So you will need to write JS that handles placing the slds-active classes and the slds-show/slds-hide classes when a user clicks a tab.


Yup, as the Lightning Design System is a Pure CSS framework, we have to write our own javascript for the components.

I have written the code to handle any type of Lightning Design Tabs(default & scoped) in my blog here: http://www.minerva18.com/blog/creating-switchable-lightning-design-tabs-in-salesforce/

And It looks like this:

(source: minerva18.com)

I hope it helps, Thanks :D


This is a nice and clear example of how to activate/deactivate tabs:


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .