You are probably going to want to use "events" to do this.
The approach I would consider comprises the following:
1) A Navigation component with links/buttons that fire a lightning event (this is your header)
2) The Lightning Event (a separate component - this is new to your setup)
3) A "body" component (could be one, or many) that listens for the events and changes its content dynamically (even dynamically loading other components) (this is probably your footer)
So (1) will be a component with some HTML markup including a navigation item like:
<li><a href="#" onclick="{!c.activitySelected}">Activity</a></li>
And in the component controller a method that [calls a helper method that] does:
performActivitySelected : function() {
var navSelected= $A.get("e.c:navSelected");
navSelected.setParams({ "name" : "activity" });
navSelected.fire();
},
The navSelected
var in that then references (2) which is this Lightning event (note: the name of the event component has to line up with the $A.get from above)
<aura:event type="APPLICATION" description="Event from nav">
<aura:attribute name="name" type="String"/>
</aura:event>
and then finally, in the "main" body / footer component (3) you want some markup in the component to listen to these events and change the "body" area like:
<aura:component >
<aura:handler event="c:navSelected" action="{!c.onMenuItemSelected}"/>
<div aura:id="displayPort"></div>
</aura:component>
In the controller then (and use the helpers appropriately to delegate this lark) use:
onMenuItemSelected : function(component, name) {
$A.createComponent(
"c:" + name,
[],
function(newComponent, status, statusDetail) {
var content = component.find("displayPort");
content.set("v.body", newComponent);
}
);
}
so when the component hears the Event being fired, it loads a component - in this case - with the given name and shoves it into it's body - but you can do anything you like from that point.