SfSkills Domains Docs GitHub

Home / lwc / lwc-navigation-mixin

lwc-navigation-mixin

Navigate between Lightning pages, records, and apps from LWC via NavigationMixin. Triggers: NavigationMixin, navigate, standard__recordPage. NOT for URL/deep-link strategy across apps — use lwc/navigation-and-routing. NOT for cross-tab state — use lwc/lwc-cross-tab-state-sync.

Open the skill folder on GitHub

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

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

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

TargetPageReference type
Record view / editstandard__recordPage
Object list viewstandard__objectPage + list actionName
Custom Lightning componentstandard__component
External URLstandard__webPage
Experience Cloud named pagecomm__namedPage
Relative URL in Experience Cloudcomm__namedPage with pageName
  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

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

ArtifactDescription
PageReference catalogType × attributes × surface
URL helper moduleReusable generateUrl wrappers
Deep-link test matrixInternal / Experience / Mobile coverage

Package files