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
- [
v0.3.7
] Fix bug with helpers context verify, see #1 - [
v0.3.6
] Fix for server Routes - [
v0.3.5
] Updated to supportiron-router
package in version1.0.5
- [
v0.3.1
] 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
orroutePath
: 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 toactive
. 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