Breadcrumbs using Component Event in Lightning Component

Hi All,

In this post I will tell you how to use Breadcrumbs using Component Event.

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the bubbled event.

This can be useful when trying to breabcrumbs in component and We’ll see how to attribute is used for firing and handling events by using <aura:registerEvent>. Register Component Event is registers that it may fire an event by using in its markup.

When complete it will look like these screenshots:

Let’s walk through code.

BreadcrumbContainer.cmp :

<aura:component implements="force:appHostable">
    <aura:attribute name="FixedBreadcrumbs" type="String[]" default="Home,Bread,End"/>
    <aura:attribute name="Breadcrumbs" type="String[]" default="Home"/>
    <aura:attribute name="itemName" type="String" default="Home"/>
<div class="breadcrumb">
        <aura:iteration items="{!v.Breadcrumbs}" var="menu" indexVar="i">
            <c:BreadcrumbContent index="{!i}" menu="{!menu}" cmpEvent="{!c.setNavigationEvent}"/>
        </aura:iteration></div>
<div class="container">
<div>
        	This is <b>{!v.itemName}</b>  Breadcrumbs</div>
<aura:if isTrue="{!v.FixedBreadcrumbs.length > v.Breadcrumbs.length}">

<ui:Button label="Next" press="{!c.next}" />
        </aura:if></div>
</aura:component>

BreadcrumbContainerController.js

({
	setNavigationEvent : function(component, event, helper){

        var index = event.getParam("navIndexEvent");
        var navbNew = [];
        var navb = component.get("v.FixedBreadcrumbs");
        for(i=0; i<=index; i++){
            navbNew.push(navb[i]);
        }
        component.set("v.itemName",navb[index]);
        component.set("v.Breadcrumbs",navbNew);
	},
    next : function(component, event, helper){
        var navb = component.get("v.FixedBreadcrumbs");
        var navbNew = component.get("v.Breadcrumbs");
        var len = navbNew.length;
        navbNew.push(navb[len]);
        component.set("v.itemName",navb[len]);
        component.set("v.Breadcrumbs",navbNew);
    }
})

BreadcrumbContainer.css

.THIS.breadcrumb {
    padding: 20px;
    background-color: antiquewhite;
    margin: 13px;
    border-radius: 5px;
    font-size:20px;
}

.THIS.container {
    text-align: center;
    font-size: 22px;
    margin: 15px;
    padding: 20px;
    background-color: peru;
    border-radius: 5px;
}

BreadcrumbContainer is component parent component of BreadcrumbContent.

BreadcrumbContent.cmp

<aura:component >
	<aura:registerEvent name="cmpEvent" type="c:CmpEvent"/>
	<aura:attribute name="menu" type="String" />
    <aura:attribute name="index" type="integer" />
    <a onclick="{!c.setNavigation}">{!v.menu}</a> ❱
</aura:component>

BreadcrumbContentController.js

({
	setNavigation : function(component, event, helper) {
        var cmpEvent = component.getEvent("cmpEvent");
        var index = component.get("v.index");

        cmpEvent.setParams({"navIndexEvent" : index});
        cmpEvent.fire();
    },
})

In this component i am using <aura:registerEvent>.

CmpEvent.evt

<aura:event type="COMPONENT" description="Event for set Index No." >
    <aura:attribute name="navIndexEvent" type="integer" default=""/>
</aura:event>

This is a Event with the type of COMPONENT.

Thanks