# 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](/docs/platform/lwr/guide/lwr-outlets.html#lightning-navigation)