Navigate user from LWC to an external URL

Very rarely you might have to navigate the user from Lightning Web Components to an external URL. Out of the box, Salesforce provides a solution to that.

Let us look at a snippet on that.

import { LightningElement } from "lwc";

import { NavigationMixin } from "lightning/navigation";

export default class ExploreNavigation extends NavigationMixin(
  LightningElement
) {
  handleNavigate() {
    const config = {
        type: 'standard__webPage',
        attributes: {
            url: 'http://salesforcecasts.com'
        }
	};
    this[NavigationMixin.Navigate](config);
  }
}

Navigating a user to an external URL from LWC

The approach that we will be following is going to be as usual. We need to create a config object and pass it to the method this[NavigationMixin.Navigate].

In the config that we provide, we need to specify the type as standard__webpage and in attributes, we need to specify the external URL, the rest of everything will be taken care by the platform.

Hope that was helpful!

I have put together a FREE course on Javascript that helps you master Lightning Web Components.

It just takes 2 hours to finish the course and you will be able to feel the difference.

JavaScript for LWC →