Are you looking for a way to open a lightning component in a new tab/window on detail page button click?

While working on a lightning component development, I found that there is no standard way to open a lighting component in a new tab. You can find the same problem being asked on developer forums.

So, to be honest there is no standard way to achieve this behavior. I used a workaround to get this done in a project. I thought it’s good to share it if someone is looking for a way. I will divide this into 3 simple steps.

1. Create a New Lightning Component Tab

In order to create a new Lightning Component Tab, please follow these steps.

  • Navigate to Setup and then Tabs.
  • Click on New button in Lightning Component Tab section.


  • We will need the tab name for the URL which we are going to use for the button. You need to add select that lightning component here and it should implements force:appHostable interface.
2. Create a New Button
  • Create a Detail Page button with “Display in new window” behaviour.
  • Button or Link URL

    tab_name is the Tab name (API Name) which we created in the previous step. Additionally, you can add parameters to the URL. For example – Case record Id

    New_Case - Tab Name 
  • Add this button to the page layout under Salesforce1 and Lightning Experience Actions from available Salesforce1 and Lightning Actions.
3. Get the passed Id in the URL

Now, here is the tricky part. Above 2 steps are enough if you don’t want to get the Id passed in the parameter. force:hasRecordId doesn’t work in this scenario. In order to get the passed Id or any other parameter, you will have to do some code in the lightning component which is being displayed in the new page. I did the following things to get the URL parameter.

  • Implement lightning:isUrlAddressable interface to the Lightning component to get access to the current page state
  • Added an event handler which will be fired when the component gets loaded.

That’s all you need to achieve this functionality. Please comment your questions in case of any doubt/clarification.


If you have enabled the “NEW URL FORMAT” update in your org then you will have to update URL in the tab as per new format.



Old URL – /one/

New URL –  /lightning/n/tab_name


Here’s What You Need To Know About The New URL Format For Lightning

About Naval Sharma

I am certified Salesforce Developer with Sales and Service cloud certifications. I am a true believer in #GivingBack principle and a Salesforce enthusiast. I am working as a member of our #SalesforceOhana to learn and help other fellow Trailblazers of the community to grow and learn. "I'm a true believer in karma. You get what you give, whether it's bad or good."

31 thoughts on “Are you looking for a way to open a lightning component in a new tab/window on detail page button click?

  1. Zen in url will always be same? I am using /one/ link in my lightning component to launch componet tab. But it gives me unidentified page url. Please help

  2. Naval Sharma

    Hi Zen,

    You need to replace “tab_name” in /one/ with your custom tab’s name.

    If you see the provided example, you will see that I have used New_Case which is the custom tab’s API name.

    1. Zen didnt work for me. Had to use “/lightning/n/tab_name” to make it work. Is it right approach?

      Also if I want to use visualforce tab to launch canvas app with parameters in lightning, is it possible.

      Thanks for the article. It is really useful.

  3. Sam

    Hi Naval,
    Thank for this nice post.

    I have a similar requirement, on click of an action button, i need to open a tab which will have custom lightning components. For this i created a tab for my component, created a button under ‘button and url’, by passing the new tab URL and appending a parameter ‘ID’ in the URL.
    It does opens a new tab on click of action button, but the new tab have a blank name. And if i go to any other tab and come back to this action button tab, the component on it is disappearing.
    I am getting the name when i dont pass any url parameters, but not when i pass a parameter, and disappearing of component is happening anyways.

    Any idea why of this behaviour,. please help with tour inputs.

    1. Naval Sharma Post author

      What do you mean by new tab have a blank name? Can you please post some screenshots?

      1. Abhilash A

        While opening new tab, tab name is not showing
        after clicking button , new tab is opening and tab name is displaying as Loading…, not any tab name is displayed.
        Kindly post any solution

  4. Cherisse

    Is there a way to dynamically close the tab, let’s say upon a user clicking a “cancel” button?

    1. Naval Sharma Post author

      I don’t think so it’s possible. Try to use window.close() on cancel button click event and see if that works.

  5. adivishwak

    Hi Naval, thanks for the awesome post, but I guess with recent changes the url format is changed. For eg:


    this is the url i received in helper method and my tab name is csg. I am utilizing the new URL format only in formula field as
    HYPERLINK(“/lightning/n/csg?id=”&Id ,”Get Quote”,”_blank”)

    1. Hema

      Hi adivishwak,

      I have tried with the URL format which you have put here. HYPERLINK(“/lightning/n/Order_Clone_With_Products?id=”&Id) and my tab name is ‘Order_Clone_With_Products’. However, on clicking the detail page button, i am navigating to home page instead of my lightning component. Could you please me with it ?

      many thanks in advance!

  6. Surya Gupta

    Hi, Thanks for the Article. It helped a lot though !

    One thing I would like to highlight is , In Chrome it is not opening New tab , instead using the same tab to navigate to the desired component.

    Secondly, the back button of the browser doesn’t work, i.e. it removes the history of the same or keeps redirecting to the same component again and again.

    I really wanted it to open a new browser tab but unfortunately , after following the above steps correctly , it doesn’t work.

    Thanks in advance for the solution.

  7. SV

    Hello Naval,
    Thanks for sharing,
    I am having bit different scenario where its not working for me.
    I am creating detail page url button and from which I am redirecting to component like
    when I open component I am getting undefined for cid.
    Please help me for this.

    1. Naval Sharma Post author

      In general the “default” namespace is indicated by c__, so I expect the correct way to do this — if you’re manually building the url — is to prefix each of you’re parameters with c__ and they won’t get stripped.

  8. Madhura

    Hi Naval,

    Useful Post. I have similar requirement and hence I have done the steps mentioned above. First two steps are working fine however I want to pass Id of he record and hence followed 3rd step however I am not able to get the Id in the lightning component.
    When I click the button, I see the Id in the URL but when the new component loads the Id is removed from URL and hence I get null recordId in the doInit() method.

    Please suggest.

    1. Naval Sharma Post author

      In general the “default” namespace is indicated by c__, so I expect the correct way to do this — if you’re manually building the url — is to prefix each of you’re parameters with c__ and they won’t get stripped.

      1. Madhura

        Hi Naval,

        Thanks for the quick reply. However I didn’t understand where exactly we should append the namespace “c__” ?

        The Button is created for Case and URL mentioned is :

        where Clone is the tab name.

        It opens the Clone tab and appends the Case record Id, however as the component loads the record Id gets stripped.

        So when the button is clicked the URL shows as :


        But when the component loads and doInit method is called and the id is stripped from URL.

      2. Naval Sharma Post author

        Your URL should be like this –

  9. manish21mahajan


    This is working for me with c__id and using same in Aura component. But With this approach it is not opening the new tab in Chrome but it is making a new tab in Lightning only. any suggestions how to open a new tab rather than like a record in lightning tab.


  10. Susmitha

    Thank you Naval Sharma for a very helpful post.
    Thanks a ton, it helped to solve my biggest issue. Really appreciate your effort!!

  11. misstoxic7

    I don’t know why but my url is generating like this – /lightning/n/Tab_API_NAMe?ws=%2Flightning%2Fr%2FAccount%2F”idvalue”%2Fview

    I’m not getting the id tag itself. How to resolve this issue. Please help

  12. Tyler McCarty

    I am getting “undefined” from component.get(“v.pageReference”) when there is an id passed in the url


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.