Lightning:tab in lightning component

We use Lightning:tab to display tab. The tab content is displayed when we click on the tab.
Lightning:tabset is a collection of tab.

Sample syntax:

<aura:component>

    <lightning:tabset selectedTabId="one">  // selectedTabId is used to set default tab.


        <lightning:tab label="Tab 1" id="one">
            Content from first tab
        </lightning:tab>


        <lightning:tab label="Tab 2" id="two">
            Content from second tab
        </lightning:tab>


        <lightning:tab label="Tab 3" id="three">
            Content from three tab
        </lightning:tab>


    </lightning:tabset>

</aura:component>

Image:

To display tab vertically used, variant="vertical" in lightning:tabset.

Image:

TO handle click on tab we used onactive="{!c.handleActive}" with lightning:tab.


<lightning:tab label="Tab 2" id="two" onactive="{!c.handleActive}">

            Content from second tab

        </lightning:tab>

Controller:

({
handleActive : function(component, event, helper) {
alert("Handle active");
}
})