---
schema_version: "1"
id: a3146b5a7facc8b4c28b3f9edf98f1cbfa4b1d26926302417a43a57acd0ffb5d
title: Navigation
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/navigation/lightning-navigation.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-navigation.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1e1557a6183790a97dd4e97f6c3823c7a9c01f5bfb20ab6e312d5e890b1d79d3
products:
  - Lightning Component Reference
---
# Navigation

**`lightning/navigation`**

Generate a URL or navigate to a page reference using the `lightning/navigation` wire adapters and functions.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Mobile Offline

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

To handle navigation in a Lightning Web Runtime (LWR) app, use the `lwr/navigation` module instead. For more information, see [Client-Side Routing in LWR on Node.js](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-client-overview.html).

`CurrentPageReference` gets a reference to the current page in Salesforce. Page URL formats can change in future releases. To future proof your apps, use page references instead of URLs. Use the page reference to create a deep link to the page. `NavigationMixin` gets a reference to the navigation service. Use the navigation service to navigate to another page in the application and generate a URL for a page.

## CurrentPageReference

Get a reference to the current page in Salesforce. Page URL formats can change in future releases. To future proof your apps, use page references instead of URLs. Use the page reference to create a deep link to the page.

```javascript
import { CurrentPageReference } from 'lightning/navigation';
@wire(CurrentPageReference)
pageRef;
```

The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Add Query Parameters](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-add-params-url).

## NavigationMixin

Apply the `NavigationMixin` to the component's base class to gain access to its APIs.

```javascript
import { NavigationMixin } from "lightning/navigation";
export default class MyCustomElement extends NavigationMixin(LightningElement) {}
```

The `NavigationMixin` adds two APIs to your component's class. Invoking these functions before the element is connected to the DOM can have unexpected results.

- `[NavigationMixin.Navigate](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/pageReference, [replace])` - A component calls this API to navigate to another page in the application.
- `[NavigationMixin.GenerateUrl](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/pageReference)` - A component calls this API to get a `promise` that resolves to the resulting URL. The component can use the URL in the `href` attribute of an anchor.

This example shows how to invoke these API methods from `this`:

```javascript
import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";

export default class Example extends NavigationMixin(LightningElement) {
  navigateToObjectHome() {
    // Navigate to the Account home page
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Account",
        actionName: "home",
      },
    });
  }

  recordPageUrl;

  connectedCallback() {
    // Generate a URL to a User record page
    this[NavigationMixin.GenerateUrl]({
      type: "standard__recordPage",
      attributes: {
        recordId: "005B0000001ptf1IAE",
        actionName: "view",
      },
    }).then((url) => {
      this.recordPageUrl = url;
    });
  }
}
```

## Usage Considerations

We recommend that you use `lightning/navigation` instead of `window.location` to navigate to a page from a Lightning web component. Using `window.location` can cause unexpected behavior in different browsers, different containers such as Lightning Experience and Experience Builder sites, or when you use an iframe. Manipulating the URL directly using `window.location` can also expose you to potential security vulnerabilities.

```javascript
// Don't do this
window.location.href = "https://www.salesforce.com";
```

To navigate to a non-Salesforce web page, use the `standard__webPage` type.

```javascript
// Do this instead
handleNavToWebPage() {
        const pageref = {
            type: 'standard__webPage',
            attributes: {
                url: 'https://www.example.com/'
            }
        };

        this[NavigationMixin.Navigate](pageref);
    }
```

To navigate to a Salesforce record page, use the `standard__recordPage` type. For more information, see [PageReference Types](https://developer.salesforce.com/docs/platform/lwc/guide/reference-page-reference-type).

## LWC Recipes

The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses `lightning/navigation`, see the `c-nav-to-*` components in the LWC Recipes repo.

## See Also

[Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)


:::::

:::::tab
::component-specification{component="navigation" model="lwc" namespace="lightning"}

:::::

::::::