Navigate to Component Using lightning:navigation

in this example, we will see how to navigate from the one lightning component another component using lightning:navigation. Use lightning:navigation component to navigate to a given pageReference or to generate a URL from a pageReference.  PageReference is a reference to a page, providing a well-defined structure that describes the page type and its corresponding values. You should use the PageReference definitions instead of attempting to parse the URL directly. The following PageReference properties are supported.

type:- The API name of the PageDefinition like component or standard page etc.

attributes is an object of values for each attribute specified by the PageDefinition.

state This property defines the parameter of page URL to be generated.

The below is the simple component that we will be invoking from another component by using navigation API.


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:attribute name="firstName" type="String" />
    <aura:attribute name="lastName" type="String" />
        Full Name : {!v.firstName} + {!v.lastName}
    init: function(cmp, event, helper) {
        var pageReference = cmp.get("v.pageReference");
        cmp.set("v.firstName", pageReference.state.firstName);
        cmp.set("v.lastName", pageReference.state.lastName);

In the init handler we are getting the page reference from the navigation API and setting the attributes.


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <lightning:navigation aura:id="navService"/>
    <aura:attribute name="pageReference" type="Object"/>
    <aura:attribute name="url" type="String"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:button label="Open Lightning Component" onclick="{!c.handleClick}"/>


    init : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Target"    
            "state": {
                "firstName": "Test"  ,
                "lastName": "user"    
        cmp.set("v.pageReference", pageReference);
        var defaultUrl = "#";
        .then($A.getCallback(function(url) {
            cmp.set("v.url", url ? url : defaultUrl);
        }), $A.getCallback(function(error) {
            cmp.set("v.url", defaultUrl);
    handleClick: function(cmp, event, helper) {
        var navService = cmp.find("navService");
        // Uses the pageReference definition in the init handler
        var pageReference = cmp.get("v.pageReference");

In the client-side controller, set the pageReference attribute for the lightning component and set the state and attributes. Set the URL on your link using the generateUrl() method on the init handler.

handleClick method on the button click will navigate to the Target component.