lwc-navigation-mixin

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

1. Identify target context (internal, Experience, mobile).
2. Pick PageReference type matching target and context.
3. Populate attributes (recordId, objectApiName, etc.) per type spec.
4. Use state for transient params (tab, filter).
5. Choose Navigate (immediate) or GenerateUrl (async).
6. For mobile deep-links, test via Mobile Publisher.
7. Never fall back to window.location.href = — breaks routing.

Review Checklist

• NavigationMixin applied via extends NavigationMixin(LightningElement)
• PageReference type matches the surface (standard vs comm)
• Attributes populated with required keys
• State params prefixed c__ where custom
• GenerateUrl used for hrefs; Navigate for routing
• No window.location fallbacks
• Experience Cloud deep-links tested in the Experience context
• Mobile app deep-links tested

Salesforce-Specific Gotchas

1. state param names must start with c__ unless using a framework-defined key.
2. standard__namedPage cannot be used in Experience Cloud; use comm__namedPage.
3. 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