How to use ” NavigationMixin ” with tag in LWC

In this article, We will see how we can use “NavigationMixin” with <a> tag.

Scenario:- I have to make the account name clickable. And when users click on the account name. User should redirect to the detail page of that particular account.

showContactData.html

<template>
    <lightning-card>
        <template if:true={contacts}>
            <div class="slds-grid">
                <div class="slds-col">Account Name</div>
                <div class="slds-col">Contact Name</div>
                <div class="slds-col">Contact Email</div>
            </div>
            <template for:each={contacts.data} for:item="contact">
                <div class="slds-grid" key={contact.Id}>
                    <div class="slds-col" key={contact.Name}>
                        <a href="javascript:void(0)" name={contact.Account.Id} onclick={navigateToRecordViewPage} >
                            {contact.Account.Name}
                        </a>
                    </div>
                    <div class="slds-col" key={contact.Name}>{contact.Name}</div>
                    <div class="slds-col" key={contact.Email}>{contact.Email}</div>
                </div>
            </template>
        </template>
    </lightning-card>
</template>

showContactData.html

import { LightningElement,wire } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';
import getContactRec from '@salesforce/apex/ShowContactData.getContactRec';
export default class ShowContactData extends NavigationMixin(LightningElement) {
    @wire (getContactRec) contacts;

    navigateToRecordViewPage(event){
        console.log('==>dsfdsfd',event);
        //alert(event.target.name);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.target.name,
                objectApiName: this.objectApiName,
                actionName: 'view'
            },
        });
    }
}

showContactData.js-meta.xml

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

ShowContactData.cls

public with sharing class ShowContactData { @AuraEnabled(cacheable=true) public static List<Contact> getContactRec(){ return [SELECT Account.Id,Account.Name,Name,Email FROM Contact AccountId != NULL]; }}

Here is the available pages for navigate.

    navigateToObjectHome() {
        // Navigate to the Case object home page.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Case',
                actionName: 'home'
            }
        });
    }

    navigateToListView() {
        // Navigate to the Contact object's Recent list view.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            },
            state: {
                // 'filterName' is a property on the page 'state'
                // and identifies the target list view.
                // It may also be an 18 character list view id.
                filterName: 'Recent' // or by 18 char '00BT0000002TONQMA4'
            }
        });
    }

    navigateToNewRecordPage() {
        // Opens the new Account record modal
        // to create an Account.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            }
        });
    }

    navigateToRecordViewPage() {
        // View a custom object record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: 'a03B0000002tEurIAE',
                objectApiName: 'namespace__ObjectName', // objectApiName is optional
                actionName: 'view'
            }
        });
    }

    navigateToRecordEditPage() {
        // Opens the Account record modal
        // to view a particular record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001B000000ZBz22IAD',
                objectApiName: 'Account', // objectApiName is optional
                actionName: 'edit'
            }
        });
    }

    navigateToRelatedList() {
        // Navigate to the CaseComments related list page
        // for a specific Case record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: '500xx000000Ykt4AAC',
                objectApiName: 'Case',
                relationshipApiName: 'CaseComments',
                actionName: 'view'
            }
        });
    }

    navigateToTabPage() {
        // Navigate to a specific CustomTab.
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                // CustomTabs from managed packages are identified by their
                // namespace prefix followed by two underscores followed by the
                // developer name. E.g. 'namespace__TabName'
                apiName: 'CustomTabName'
            }
        });
    }

    navigateToWebPage() {
        // Navigate to a URL
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: 'http://salesforce.com'
            }
        },
        true // Replaces the current page in your browser history with the URL
      );
    }

For more :- https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_page_types

Hope you like this article. If you have any doubts or need some help, feel free to comment below or reach out to us on Twitter as well as LinkedIn.