Creating active navigation state with Meteor and Iron Router

Question

I want to add a class of 'active' to the nav list item that is currently being rendered by Iron Router.

Here's my markup:

<ul>
  <li>
    {{#linkTo route="option1"}}
      <span class="fa fa-fw fa-option"></span>
      Option 1
    {{/linkTo}}
  </li><li>
    {{#linkTo route="option2"}}
      <span class="fa fa-fw fa-option"></span>
      Option 2
    {{/linkTo}}
  </li>
</ul>

I've read through the guide and various articles but can't find this covered anywhere. Assuming I'll need some sort of helper?

Answer 1

I think you might find meteor-iron-router-active useful, as it has helpers for the following:

• isActiveRoute
• isActivePath