Generic BreadCrumb Component for Portal

Breadcrumbs are navigation elements which indicate a current location on the website. These helps us in easy navigation to parent pages using navigation hierarchy. In Salesforce, we use breadcrumbs in community sites for easy navigation. This post will give step by step detail to create generic breadcrum component for Portal sites.

For generic breadcrumbs we have to add below methods for easy use in other components.

1. Add new navigation
2. Replace current navigation, and
3. Remove navigation

We will use standard LWC element like lightning-breadcrumbs and lightning-breadcrumb to make generic component. This component has inbuilt CSS applied to seprate two navigation items. We will not change any design for navigation items for this post.

Let us create generic breadcrumb component step by step which will provide above mentioned functionalities.

1. Create List and New Element

To create navigation items we have to declare list of items. These items can be added/removed from list using methods.

//Breadcrumbs List variable example for list 
initCrumbs = {label: 'Home', name:'Home', href:'/',index:1 };
@track _crumbs=[];

//Add new breadcrumb 
@api addCrumb(label,page)
    {
        this._crumbs.push({label:label,name:page, page:page,index:this._crumbs.length});
}

Show these item using HTML template. We are passing data-page to pass community page api name so that we can navigate to specific portal page using handleNavigateTo click handler.

<lightning-breadcrumbs>
        <template for:each={_crumbs} for:item="d">
            <lightning-breadcrumb
                key={d.index}
                label={d.label}
                name={d.name}
                data-page={d.page}
                onclick={handleNavigateTo}
            >
            </lightning-breadcrumb>
        </template>
</lightning-breadcrumbs>

2. Replace current navigation

In many scenrio, we have to replace current navigation as we can have multiple tabs, sections on same page. So based on selected tab or section we have to change navigation item. We can use below code to set current navigation. navigateUrl method will be used to open community page.

@api addCurrentCrumb(label,page)
{
        this._crumbs.splice(-1);
        this.addCrumb(label,page);
        this.navigateUrl(page);
}

3. Show selected navigation

When we have navigation items, we can click any previous item. In that case we have to open page for selected navigation item and remove item which is after that selected item.

@api showSelectedCrumb(event)
{
        const name = event.currentTarget.name;
        event.preventDefault();
        let crumb=this._crumbs.find(x=>x.name==name);
        if(crumb.index>0)
        {
            this._crumbs=[...this._crumbs.filter(x=>x.index<=crumb.index)];
        }
}

Complete LWC Code:

Using BreadCrumb LWC:

We have created generic breadcrumb component, let us add this component into another component to test functionality. We have to add below code in template to add above created breadcrumb component. We can add hyperlink or button element to create breadcrumb navigation items.

<c-bread-crumb ></c-bread-crumb>
<a href="" onclick={clickMaster}> Master</a>

JS code:

// For Adding new Breadcrumb item
this.template.querySelector('c-bread-crumb').addCrumb('Customer','Customer__c'); 

//For updating old Breadcrumb item
this.template.querySelector('c-bread-crumb').addCurrentCrumb('Master', 'Master_Page__c'); 

Completed Code:

Test Image:

References:

Breadcrumbs

Other Similar Posts:

Create Partner Portal User in Salesforce

View Files in Salesforce Lightning Community Portal

Create Customer Community User in Salesforce Apex