diff --git a/components/NavLink/NavLink.jsx b/components/NavLink/NavLink.jsx
index 279350f16..1e93569d5 100644
--- a/components/NavLink/NavLink.jsx
+++ b/components/NavLink/NavLink.jsx
@@ -1,5 +1,6 @@
+import _ from 'lodash'
 import React, { PropTypes, Component } from 'react'
-import { NavLink as RNavLink} from 'react-router-dom'
+import { NavLink as RNavLink, matchPath} from 'react-router-dom'
 
 class NavLink extends Component {
   constructor(props) {
@@ -8,8 +9,16 @@ class NavLink extends Component {
 
   render() {
     const { to, content, target } = this.props
+    const { router } = this.context
     let classes = this.props.classes
     const attrs = { to }
+    if (to && router) {
+      const pathname = _.get(router, 'route.location.pathname', '')
+      const active = matchPath(pathname, { path: to }) !== null
+      if (active) {
+        classes += ' selected'
+      }
+    }
     if (target || target !== '_self') {
       attrs.target = target
       if (attrs.target === '_blank') {
@@ -18,12 +27,16 @@ class NavLink extends Component {
     }
     return (
       <li className={classes}>
-        <RNavLink activeClassName="selected" {...attrs}>{content}</RNavLink>
+        <RNavLink activeClassName="active" {...attrs}>{content}</RNavLink>
       </li>
     )
   }
 }
 
+NavLink.contextTypes ={ 
+  router: PropTypes.object
+}
+
 NavLink.propTypes = {
   to: PropTypes.string.isRequired,
   target: PropTypes.string,
@@ -31,4 +44,4 @@ NavLink.propTypes = {
   classes: PropTypes.string.isRequired
 }
 
-export default NavLink
+export default NavLink
\ No newline at end of file