MufidJamaluddin
diff --git a/‎src/SidebarNav.md
Copy file name to clipboardExpand all lines: src/SidebarNav.md
+23Lines changed: 23 additions & 0 deletions b/‎src/SidebarNav.md
Copy file name to clipboardExpand all lines: src/SidebarNav.md
+23Lines changed: 23 additions & 0 deletions
diff --git a/‎src/SidebarNav2.js
Copy file name to clipboardExpand all lines: src/SidebarNav2.js
+18-7Lines changed: 18 additions & 7 deletions b/‎src/SidebarNav2.js
Copy file name to clipboardExpand all lines: src/SidebarNav2.js
+18-7Lines changed: 18 additions & 7 deletions
@@ -120,6 +120,29 @@ __React Router NavLink props to pass in `attributes` object:__
   ]
 }
 ```
+To override default behavior of `nav-dropdown toggle` and navigate to `url` use custom `onClick` method:
+```json5
+{
+  name: 'Base',
+  url: '/base',
+  icon: 'icon-puzzle',
+  attributes: {onClick: (e, item)=>{ console.log(e, item) }}, // (v2.5.6 up) optional
+  children: []
+}
+``` 
+For active route consistency, you can set redirect on partial routes in `src/routes.js`: 
+```js
+import { Redirect } from 'react-router-dom';
+...
+const routes = [
+  ...
+  { path: '/base', exact: true, name: 'Base', component: () => <Redirect to={'/base/cards'}/> },
+  { path: '/base/cards', name: 'Cards', component: Cards },
+  { path: '/base/forms', name: 'Forms', component: Forms },
+  ...
+]
+```
+
 - divider:
 ```json5
 {
 
@@ -49,8 +49,12 @@ class AppSidebarNav2 extends Component {
 
   _scrollBarRef = null;
 
-  handleClick(e) {
-    e.preventDefault();
+  handleClick(e, item) {
+    if (item.attributes && typeof item.attributes.onClick  === 'function' && !this.isActiveRoute(item.url, this.props)) {
+      item.attributes.onClick(e, item)
+    } else {
+      e.preventDefault();
+    }
     e.currentTarget.parentElement.classList.toggle('open');
   }
 
@@ -71,7 +75,7 @@ class AppSidebarNav2 extends Component {
   }
 
   getAttribs(attributes) {
-    return JSON.parse(JSON.stringify(attributes || {}));
+    return {...attributes};
   }
 
   // nav list
@@ -132,14 +136,21 @@ class AppSidebarNav2 extends Component {
     delete attributes.class;
     delete attributes.className;
     const itemAttr = this.getAttribs(item.itemAttr);
-    const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class, itemAttr.className)
+    const liClasses = classNames('nav-item', 'nav-dropdown', itemAttr.class, itemAttr.className);
     delete itemAttr.class;
     delete itemAttr.className;
+    const NavLink = this.props.router.NavLink || RsNavLink;
+
     return (
-      <li key={key} className={liClasses} {...itemAttr}>
-        <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
+      <li key={key} className={classNames(liClasses, {'open': this.isActiveRoute(item.url, this.props)})} {...itemAttr}>
+        <NavLink activeClassName='open'
+                 className={classes}
+                 to={item.url || ''}
+                 {...attributes}
+                 onClick={(e) => this.handleClick(e, item)}>
+          <i className={classIcon}/>
           {item.name}{this.navBadge(item.badge)}
-        </a>
+        </NavLink>
         <ul className="nav-dropdown-items">
           {this.navList(item.children)}
         </ul>