How to navigate to Web Page from Salesforce Lightning Web Component?

How to navigate to Web Page from Salesforce Lightning Web Component?

standard__webPage type can be used in lightning/navigation to Web Page from Salesforce Lightning Web Component.

Sample Code:

Lightning Web Component:

HTML:

<template>      
    <lightning-card >  
        <lightning-button 
            label="Click Here" 
            variant="brand"  
            onclick={openWebPage}>
        </lightning-button>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class sampleLightningWebComponent extends NavigationMixin( LightningElement ) {
     
    openWebPage() {

        console.log( 'Inside Open Web Page' );
        this[ NavigationMixin.Navigate ] ( {
            type:'standard__webPage',
            attributes:{
                url: 'https://www.salesforce.com/'
            }

        } );
    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply