---
schema_version: "1"
id: 7ee3064dd6d18fa0b5610729ab21179e0e6d0ed554a8c803d6cf746ab9caefc8
title: NavigationMixin
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/references/csr-reference/navigationmixin.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigationmixin.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5ce9adbc8cabaa61683cce2b43b2b804c4b68f6db91e8f8276345c3f04d78387
products:
  - Lightning Web Runtime
---
# NavigationMixin

You can use `NavigationMixin` instead of the `navigate()` and `generateUrl()` APIs. Both options offer the same functionality, but only `NavigationMixin` is compatible with Lightning Experience. If you're writing a component for use in both LWR and Lightning Experience, choose `NavigationMixin`.

## Syntax

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

const pageRef = {
  type: "standard__recordPage",
  attributes: {
    recordId: "001xx000003DGg0AAG",
    objectApiName: "Account",
    actionName: "view",
  },
};

export default class Example extends NavigationMixin(LightningElement) {
  // Navigate to a page reference
  navPageRef() {
    this[NavigationMixin.Navigate](pageRef);
  }
  // Generate a URL for a page reference
  getUrl() {
    this[NavigationMixin.GenerateUrl](pageRef).then((url) => console.log(url));
  }
}
```

**See Also**

- [Component Reference (Lightning Web Components): lightning-navigation](https://developer.salesforce.com/docs/component-library/bundle/lightning-navigation/documentation)
- [Understand Client-Side Routing: Lightning Navigation](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-outlets.md#lightning-navigation)