How to navigate to a custom lightning tab in experience site

Question

I am trying to implement a requirement in experience site. Below is what has been implemented in salesforce and I want similar behavior in experience site.

1. In accounts object created a quick action RandomQuickAction with Action Type = Lightning Component and Lightning Component = RandomAuraCmp
   
2. In the RandomAuraCmp , written below code to navigate to a custom lightning component tab RandomCustLightTab
   

Aura Component Code

<lightning:navigation aura:id="navService"/>

Aura helper code

var navService = component.find("navService");
        var pageReference = {
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'RandomCustLightTab API Name',
            }, 
            state: { 
                c__recordId: component.get("v.recordId"),
                c__objectName : component.get("v.sObjectName")
            }
        };
        navService.navigate(pageReference);

3. The RandomCustLightTab has a LWC RandomLWC as the content where user will take further actions
   

Flow in Salesforce which works fine- User clicks on the RandomQuickAction and its navigated to a new tab RandomCustLightTab which has the LWC RandomLWC
However, it doesnt work in Experience site

As per https://help.salesforce.com/s/articleView?id=sf.networks_customize_tabs.htm&type=5

• Lightning Component tabs aren’t supported in Experience Cloud sites.
  

We are able to expose the quick action in Accounts page in experience site but when its clicked nothing happens. The aura RandomAuraCmp just loads and is stuck. I understand for experience site , to use lightning navigation I will have to update part type:'comm__namedPage'(and may be something more which I cant find) in aura helper , however I think the issue is that Lightning Component tabs aren’t supported in Experience Cloud sites. Any insights ? What would be the best way to achieve this same behavior in Experience site?

Answer 1

I did some analysis and the way it can be done is by creating a new standard page in experience cloud and then add the RandomLWC in the page. There is no need to add the page in any navigation. In RandomAuraCmp add below code to aura helper navigate to the page. Here name attribute should be api name of the new page.

var navService = component.find("navService");
       
        var pageReference = {
            type:'comm__namedPage',
            attributes: {
               name:'testpage__c'
            }
        }

Thank You!