Navigate From a Modal

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.

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.

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.

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.

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:

• lightning-modal-body
• lightning-modal-header
• lightning-modal-footer

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

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.

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

See Also

• Component Reference: lightning/modal
• PageReference Types
• Create and Dispatch Events