How can we navigate from one component to another component in Salesforce Lightning?

<ul class="slds-list--horizontal slds-has-dividers_around-space" onclick="{!c.click}">

<lightning:layout >
<lightning:layoutItem size="3" padding="around-small">
<div class="img " >
<img  style="height: 100px;" src="/resource/Images/Assets/1.png"  />
<h1>TEXT1</h1>
</div>
</lightning:layoutItem>
<lightning:layoutItem size="3" padding="around-small">
<div class="img1" >
<img style="height: 100px;" src="/resource/Images/Assets/2.png"  />
<h1>TEXT2</h1>
</div>
</lightning:layoutItem>
<lightning:layoutItem size="3" padding="around-small">
<div class="img2" ><img style="height: 100px;" src="/resource/Images/Assets/3.png" align="middle" />
<h1>TEXT3</h1>
</div>
</lightning:layoutItem>
<lightning:layoutItem size="3" padding="around-small">
<div class="img3"  style="text-align: left">
<img style="height: 100px;" src="/resource/Images/Assets/4.png"/>
<h1>TEXT4</h1>
</div>
</lightning:layoutItem>
</lightning:layout>

</ul>

Controller.Js

click:function(component,event,helper){

var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:Component2",

});

evt.fire();
}

Thanks