I have added a


in a lightning component. On button click I want to add this new tab.

Is there any way to do this. Please suggest.

  • corrected typo: I have added a tab in a lightning component using <lightning:tab>
    – shilpa
    Jan 5 '17 at 10:45
  • I think so that you can add a tab dynamically using $A.createComponent Method however dynamically generated components tend to give errors in future specially while firing and capturing events. If you want to dynamically add/ remove tab you can either show or hide them or use LDS tabs.
    – manjit5190
    Jan 5 '17 at 12:22

I do not know your complete usecase but you can use aura:iteration to create new tabs.

<aura:attribute name="v.tabList" type="List"/>
<lightning:tabset aura:id="tabset" >
    <aura:iteration items="{!v.tabList}" var="item">
           <lightning:tab id="{!item.id>>

and you can dynamically add and remove items from tabList to add or remove tabs.


You could use the $A.createComponent(String type, Object attributes, function callback) method.

If you have a button in your component, let it call a method that implements the following code:

                "title": "Your dynamic Tab" //you can add more variables here
            function(newTab, status, errorMessage){
                //Add the new tab to the body array
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    cmp.set("v.body", body);

You also need to add {!v.body} expression to your component where you want your tab.



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.