Navigate to Component Using Lightning Navigation API

With summer 18 release, navigating with to lightning components is made easier with new navigation API. With the lightning:isUrlAddressable interface, you now control which Lightning components can be opened programmatically. You can also now easily capture URL parameters using the v.pageReference attribute and use the parameter values in your component. With the lightning:navigation component, define a pageReference object for navigating to a custom component that implements lightning:isUrlAddressable and set any attributes the component allows. In standard navigation Lightning apps, you can use the lightning:navigation component to navigate to a custom component that implements lightning:isUrlAddressable. Using lightning:navigation with pageReference provides the following benefits over the now deprecated force:navigateToComponent for standard navigation Lightning apps.

  • Gives you control over whether a component can be opened programmatically, and which attributes can be dynamically set when
    the component is opened.
  • Control and manage which URL parameters are used in your component.
  •  Future-proofs your apps from changes in URL format.
  •  Generates a user-friendly URL for these components.

Quick Notes 

  • New interface lightning:isUrlAddressable is available for components that need to be implemented to navigated directly via URL
  • This interface is used with the component lightning:navigation to navigate from one component to the URL-addressable component. This navigation feature is only supported in Salesforce Lightning and the Salesforce Mobile App.
  • The lightning:isUrlAddressable interface extends the lightning:hasPageReference interface.
  • A component that implements lightning:isUrlAddressable then gets access to the page state through the pageReference attribute.
  • The page state is a representation of the current URL query parameters.
  • lightning:isUrlAddressable enables you to generate a user-friendly URL for a Lightning component with the pattern /cmp/componentName instead of the base-64 encoded URL you get with the deprecated  force:navigateToComponent event.


For example, c:hellotarget displays a string that’s passed in from another component from the navigation url.


<aura:component implements="lightning:isUrlAddressable" description="c:helloTarget component">
    <aura:attribute name="firstname" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    Hello {!v.firstname}.

In c:hellotarget component’s client-side controller, retrieve the attribute values from the page state.

    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__firstname;
        cmp.set("v.firstname", firstname);

In the component that you want to trigger the navigation, include an instance of the lightning:navigation component. Then include the component to perform the jump to the other component. In this example, a lightning:button component is added to c:hello to trigger the navigation to the URL addressable component.


<aura:component description="c:hello component" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>

Define your page reference for the component you’re navigating to. We recommend setting the page reference using an init handler. This example stores the pageReference in an attribute in the component, and is used to navigate later in the click handler.

    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__helloTarget',
            state: {
                "c__firstname": "John"
        component.set("v.pageReference", pageReference);
    handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");

Clicking the button in c:hello directs you to /lightning/cmp/c__helloTarget?c__firstname=John, and Hi John is displayed on the c:helloTarget page.