unable to navigate to component using e.force:navigateToComponent

i am trying to populate componentB in new tab onclick of a button from componentA using e.force:navigateToComponent unable to navigate ????? ANY ideas on this .

js
----
navigateToComponents: function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:SPC_Support",
componentAttributes: {
}
});
evt.fire();
}

componentA
-------
<lightning:button variant="base" label="Support" onclick="{!c.navigateToComponents}" />

componentB
-----
<div > header<div>
<div>body<div>

any idea please help me in navigating to new component in a new browser tab?????????