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:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.