Navigate From a Modal | Use Components in Salesforce Targets | Lightning Web Components Developer Guide

Open a modal that overlays the current window in response to a user action, such as a button click. Your custom modal component extends the LightningModal class and can contain a child component that triggers the navigation.

To navigate from the modal, use the NavigationMixin function in the lighting/navigation module and pass in a PageReference object. Use NavigationMixin only with a Lightning web component that extends LightningElement.

You can’t use the NavigationMixin function directly in a custom component that extends LightningModal.

Note

Let’s say you have three components - a parent component, a modal component that’s opened by the parent component, and a child component that is nested in the modal component. Define your PageReference object in the child component, and pass in the object via an event to Modal.open(). You can then handle the event in the parent component, which opens the modal and calls the NavigationMixin function to navigate.

Dispatch an Event with the PageReference Object

A modal can contain a child component that triggers the navigation. This example creates a component that contains a button, which dispatches an event when clicked.

1<!-- navToHome.html -->
2<template>
3    <lightning-card title="NavToHome" icon-name="custom:custom96">
4        <lightning-button
5            label="Go to Record Home"
6            class="slds-var-m-around_medium"
7            onclick={navigateToHome}
8        ></lightning-button>
9    </lightning-card>
10</template>

In the JavaScript file, define the PageReference object and dispatch a custom event with this object. This example navigates to the record home page using the standard__namedPage page type.

1// navToHome.js
2import { LightningElement } from "lwc";
3
4export default class NavToHome extends LightningElement {
5  navigateToHome() {
6    const pageRef = {
7      type: "standard__namedPage",
8      attributes: {
9        pageName: "home",
10      },
11    };
12
13    const evt = new CustomEvent("navigate", {
14      bubbles: true,
15      composed: true,
16      detail: pageRef,
17    });
18    this.dispatchEvent(evt);
19  }
20}

You can then use this navToHome child component in a modal component myModal that extends LightningModal. This example uses the modal base components to create a user interface for the modal. The modal base components are:

1<!-- myModal.html -->
2<template>
3    <lightning-modal-header label="Navigate from a Modal Example" ></lightning-modal-header>
4    <lightning-modal-body>
5        Modal content here
6        <c-nav-to-home onnavigate={handleClose}></c-nav-to-home>
7    </lightning-modal-body>
8    <lightning-modal-footer>
9        <lightning-button
10            label="Close"
11            onclick={handleClose}
12        ></lightning-button>
13    </lightning-modal-footer>
14</template>

Your JavaScript file extends the LightningModal component and closes the modal when you navigate away from the modal.

1import { api } from "lwc";
2import LightningModal from "lightning/modal";
3
4export default class MyModal extends LightningModal {
5  @api header;
6  @api content;
7
8  handleClose() {
9    console.log("myModal onnavigate");
10    this.close("return value");
11  }
12}

Handle the Event and Navigate

The parent component opens the modal and handles the navigation. This example shows a component that contains a button, which opens the modal when clicked.

1<!-- openModal.html -->
2<template>
3    <lightning-card title="MiscModal" icon-name="custom:custom19">
4        <div class="slds-var-m-around_medium">
5            <lightning-button
6                onclick={handleShowModal}
7                aria-haspopup="true"
8                label="Show modal"
9            >
10            </lightning-button>
11        </div>
12    </lightning-card>
13</template>

In the JavaScript file, handle the custom onnavigate event and call NavigationMixin to navigate to the record home.

1import { LightningElement } from "lwc";
2import MyModal from "c/myModal";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class MiscModal extends NavigationMixin(LightningElement) {
6  content = "The modal content";
7  header = "The modal header";
8
9  handleHeaderChange(event) {
10    this.header = event.target.value;
11  }
12
13  handleContentChange(event) {
14    this.content = event.target.value;
15  }
16
17  async handleShowModal() {
18    this.result = await MyModal.open({
19      size: "small",
20      description: "MiscModal displays the message in a popup",
21      header: this.header,
22      content: this.content,
23      onnavigate: (e) => {
24        this[NavigationMixin.Navigate](e.detail);
25      },
26    });
27  }
28}

This example is adapted from the miscModal component in the lwc-recipes repo.

Tip

See Also