Add active state on meteor.js menu

Imaging you have already created a menu in meteor js framework, somewhere in your header, something like this

<ul>
 	<li><a href="/home">Home</a></li>
 	<li><a href="/about-us">About Us</a></li>
 	<li><a href="/contact-us">Contact Us</a></li>
</ul>

SO you want to make the menu to be active when you are on current route, one of the simple solution is to create a template helper, Register a template helper by adding a file on client folder called helper.js

then inside helper.js register a template helper (Template.registerHelper), which previously called UI.registerHelper.

 

Template.registerHelper('isActive', function(){ // take in some params to determine the stats
  // assume that you are using iron-router, if not please install "meteor install iron:router"
  var currentRoute = Router.current().route.getName();
  if(currentRoute == parms){
    return "current";
  }
})

with this helper, you can add to your template.

 

<ul>
 	<li class="{{isActive "><a href="/home">Home</a></li>
</ul>

// Notice the home as argument which you defined on your iron router name.
<ul>
 	<li class="{{isActive "><a href="/about-us">About Us</a></li>
 	<li class="{{isActive "><a href="/contact-us">Contact Us</a></li>
</ul>

 

now your li class will return active when you are on that page/route.