iron-router-helpers
Quick Template helper to determine if the current route is active, for nav links.
Forked and updated from: iron-router-active
Installation
meteor add ostrio:iron-router-helpers
Update
- Updated to support Meteor 1.0.
Usage
After installing the smart package, you'll have access to four new Templates helpers called isActiveRoute
, isActivePath
, isNotActiveRoute
and isNotActivePath
.
isActiveRoute|isNotActiveRoute works against route names, while isActivePath|isNotActivePath works against the current routes path. It works well with dynamic routes.
The helpers take 2 arguments.
- routeName or routePath: used to determine whether or not the current route matches the routename that you've passed in. (mandatory)
This value is a regex expression so that you can pass in multiple routes with the | operator.
- className: this is an optional argument. if you do not set it, it will default to
active
. you can override that value, by specifying your own. The twonot active
apis will return a class ofdisabled
if you do not specify one.
1<nav> 2 <ul> 3 <li class="{{ isActiveRoute 'dashboard' }}">...</li> 4 <li class="{{ isActiveRoute 'dashboard|root' }}">...</li> 5 <li class="{{ isActiveRoute 'users' 'on' }}">...</li> 6 <li class="{{ isActivePath 'products' }}">...</li> 7 <li class="{{ isNotActiveRoute 'dashboard' }}">...</li> 8 <li class="{{ isNotActivePath 'products' }}">...</li> 9 </ul> 10</nav>
In the first example, the LI element will have a class of active
, as we've used the default value.
In the second example, you can see an example of passing in multiple routes.
In the third example, the LI element will have a class of on
, as we've overridden the default value with our own.
In the fourth example, you can see an example of checking to see if the current url contains the noun products
, which will handle multiple scenarios, such as
- /products
- /products/new
- /products/edit
So now if you had a top level products
navigation element, it would stay highlighted even though your routename changes.
In the fifth and sixth examples returns disabled
if routes is not active