# 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.

- Skill: `pranavnagrecha/lwc-navigation-mixin` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds add pranavnagrecha/lwc-navigation-mixin`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pranavnagrecha/lwc-navigation-mixin/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: PranavNagrecha (https://skillmd.com/u/pranavnagrecha)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/pranavnagrecha/lwc-navigation-mixin

---


# 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