Navigation in Lightning Component : lightning:navigation

Navigation in Lightning Component : lightning:navigation

After Summer 18, force:navigateToComponent tag will be no longer in use means it will be deprecated.  From now 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.Using lightning:navigation with pageReference provides the following benefits over the now deprecated force:navigateToComponent for standard navigation Lightning apps: –

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.
A page reference is associated with a particular type, which provides a set of attributes that are applicable for all pages of that type. The following types are supported.

Knowledge Article Page
Lightning Component (must implement lightning:isUrlAddressable)
Named Page
Navigation Item Page
Object Page
Record Page
Record Relationship Page


Here is a simple Code for the same

Component Code

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:hasPageReference,lightning:isUrlAddressable"
               access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:navigation aura:id="navigate" />
    <lightning:button label="Lightning Navigate" onclick="{!c.navigate}"
    <!-- <lightning:button label="Lightning Navigate" onclick="{!c.navigate}"
                     variant="brand" /> -->


Controller.js Code

    doInit : function(component, event, helper) {
    navigate : function(component, event, helper) {
        var nagigateLightning = component.find('navigate');
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            state: {
                filterName: 'MyAccounts'



Happy learning and Keep sharing 🙂

Resource: –

Salesforce Document


My name is Amit Singh. I am a Certified Advanced Salesforce Developer. I am 5X salesforce certified professional @PureSoftware Ltd. I love to solve the queries in Salesforce Success Community and Developer forum. I am in love with Salesforce because of its continuous improvement. Inject trailhead into your blood and you will be a salesforce champion

  • hi i am getting this error:

    No COMPONENT named markup://lightning:navigation found :

    • Hi Santosh,

      Are you trying in Developer ORG? Please try in Summer 18 Preview Org or Try in Sandbox. You can try in Developer ORG after 14th June 2018 as Summer 18 will go live on June 14.


  • This Component acts good!
    Thank you for your code!!

    May I ask you a question?

    In my organization,
    It seems that we have to rewrite a parameter(“filterName”) from MyAccounts to MyAccounts’s SFID.
    But, Lightning Components Developer Guide shows we should write list’s API Name.
    Which is right, and could you act the upper code?
    If you know, please teach me.

    state: {
    filterName: ‘MyAccounts’ →→→ ’00BXXXXXXXXXXXX’

    Amit Singh.

  • leave a comment

    Create Account

    Log In Your Account