| name | lwc-navigation-mixin |
| description | NavigationMixin for LWC: PageReference types (recordPage, recordRelationship, namedPage, webPage, comm__namedPage), navigate vs generateUrl, state params, Experience Cloud variants. NOT for routing inside custom SPA (use lwc-state-management). NOT for cross-app deep-linking (use deep-linking-patterns). |
| category | lwc |
| salesforce-version | Spring '25+ |
| well-architected-pillars | ["User Experience","Operational Excellence"] |
| tags | ["lwc","navigation-mixin","pagereference","experience-cloud","deep-linking"] |
| triggers | ["navigationmixin.navigate recordpage pagereference","how to open record in new tab from lwc","generate url lwc and copy to clipboard","experience cloud navigation comm__namedpage","lwc navigate to related list with state","navigationmixin vs lightning-navigation","lwc navigation mixin page reference recordpage","lwc navigate to url state c__ prefix required"] |
| inputs | ["Target page type (record, list, custom, external)","Context (internal app, Experience Cloud, mobile)","URL params / state to pass"] |
| outputs | ["PageReference configuration","navigate vs generateUrl usage","Experience Cloud variant","State-param pattern"] |
| dependencies | [] |
| version | 1.1.0 |
| author | Pranav Nagrecha |
| updated | "2026-05-15T00:00:00.000Z" |
LWC NavigationMixin
Activate when an LWC needs to navigate — to a record, a list view, a named page, or an external URL. NavigationMixin is the canonical Salesforce API for navigation; raw window.location usage is forbidden on most surfaces and bypasses Salesforce's routing, tab, and mobile handling.
Before Starting
- Import the mixin correctly.
import { NavigationMixin } from 'lightning/navigation'; and apply with extends NavigationMixin(LightningElement).
- Pick the right PageReference type. Internal app vs Experience Cloud has different names (
standard__* vs comm__*).
- Distinguish
navigate() vs generateUrl(). Navigate triggers routing; generateUrl returns a URL promise for anchors, copy-to-clipboard, etc.
Core Concepts
PageReference shape
{
type: 'standard__recordPage',
attributes: { recordId: '001...', objectApiName: 'Account', actionName: 'view' },
state: { c__tab: 'details' }
}
attributes are type-specific; state flows through URL params as c__*.
Internal vs Experience Cloud
- Internal:
standard__recordPage, standard__objectPage, standard__namedPage, standard__webPage
- Experience Cloud:
comm__namedPage, comm__loginPage (prefer over standard__)
navigate vs generateUrl
this[NavigationMixin.Navigate](pageRef); // route now
this[NavigationMixin.GenerateUrl](pageRef).then(url => ...); // URL string
GenerateUrl is async (returns a Promise).
New tab
Wrap in an <a target="_blank" href={url}> using generateUrl. The mixin has no direct "open in new tab" option.
Common Patterns
Pattern: Navigate to record view
const ref = { type: 'standard__recordPage',
attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'view' } };
this[NavigationMixin.Navigate](ref);
Pattern: Generate URL for copy-to-clipboard
const url = await this[NavigationMixin.GenerateUrl](ref);
navigator.clipboard.writeText(window.location.origin + url);
Pattern: State params for tab selection
{ type: 'standard__recordPage', attributes: { ... },
state: { c__selectedTab: 'history' } }
Receiving component reads @wire(CurrentPageReference) pageRef and pageRef.state.c__selectedTab.
Decision Guidance
| Target | PageReference type |
|---|
| Record view / edit | standard__recordPage |
| Object list view | standard__objectPage + list actionName |
| Custom Lightning component | standard__component |
| External URL | standard__webPage |
| Experience Cloud named page | comm__namedPage |
| Relative URL in Experience Cloud | comm__namedPage with pageName |
Recommended Workflow
- Identify target context (internal, Experience, mobile).
- Pick PageReference type matching target and context.
- Populate
attributes (recordId, objectApiName, etc.) per type spec.
- Use
state for transient params (tab, filter).
- Choose
Navigate (immediate) or GenerateUrl (async).
- For mobile deep-links, test via Mobile Publisher.
- Never fall back to
window.location.href = — breaks routing.
Review Checklist
Salesforce-Specific Gotchas
state param names must start with c__ unless using a framework-defined key.
standard__namedPage cannot be used in Experience Cloud; use comm__namedPage.
- GenerateUrl is async. Awaiting is required; returning the promise without awaiting leaves consumers with
undefined.
Output Artifacts
| Artifact | Description |
|---|
| PageReference catalog | Type × attributes × surface |
| URL helper module | Reusable generateUrl wrappers |
| Deep-link test matrix | Internal / Experience / Mobile coverage |
Related Skills
lwc/lwc-url-params-and-state — state-param handling
admin/app-and-tab-configuration — tab and app setup
mobile/mobile-deep-linking — mobile-specific nav