3

I have a lightning component that utilizes lightning-breadcrumbs for output on a page

<lightning:breadcrumbs class="slds-m-around_small">
<aura:iteration items="{!v.response}" var="tiers">
    <lightning:breadcrumb label="{!tiers.Name}" href="{!'/lightning/r/'+tiers.Id+'/view'}"/>
  </aura:iteration>

</lightning:breadcrumbs>

the issue is , when i click the links, they do a total page refresh, slowly reloading the entire salesforce page

if i place the same url in the highlights panel above it, it quickly navigates to the page, without a full refresh (its all on the same object its just different ids)

enter image description here

the link in the highligh panel "parent work pln unit" speedy navigation, the below link for the exact same thing with the exact same url, full page refresh, any ideas how to stop full refresh behavior?

1 Answer 1

1

As it says in the documentation, you should manually handle the navigation event, rather than using href, use the name to figure out where you want to go:

<aura:component>
    <aura:attribute name="myBreadcrumbs" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:breadcrumbs>
        <aura:iteration items="{! v.myBreadcrumbs }" var="crumbs">
            <lightning:breadcrumb label="{! crumbs.label }" onclick="{! c.navigateTo }" name="{! crumbs.name }"/>
        </aura:iteration>
    </lightning:breadcrumbs>
</aura:component>

/* Client-Side Controller */
({
    init: function (cmp, event, helper) {
        var myBreadcrumbs = [
            {label: 'Account', name: 'objectName' },
            {label: 'Record Name', name: 'record' }
        ];
        cmp.set('v.myBreadcrumbs', myBreadcrumbs);
    },
    navigateTo: function (cmp, event, helper) {
        //get the name of the breadcrumb that's clicked
        var name = event.getSource().get('v.name');

        //your custom navigation here
    }
})

The LWC version of the docs suggest using event.preventDefault(), which would also work here.

    navigateTo: function (cmp, event, helper) {
        //get the name of the breadcrumb that's clicked
        var name = event.getSource().get('v.name');
        event.preventDefault();
        //your custom navigation here
    }
1
  • ok will try thois today and let you know, thank you!
    – Jay Rizzi
    Jun 22, 2021 at 13:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .