diff --git a/components/navigation/Navigation.scss b/components/navigation/Navigation.scss
index 8595c149b..3df6f48e9 100644
--- a/components/navigation/Navigation.scss
+++ b/components/navigation/Navigation.scss
@@ -4,7 +4,6 @@
  */
 
 nav {
-  color: #333;
   border-right: 1px solid rgba(0, 0, 0, 0.14);
   position: fixed;
   top: 0;
@@ -13,6 +12,7 @@ nav {
   width: $navigation-width;
   background: #fff;
   font-size: 13px;
+  font-weight: 500;
   visibility: hidden;
   transform: translateX(-$navigation-width);
   transition-duration: 0.2s;
@@ -51,11 +51,7 @@ nav.is-visible {
 .Navigation {
   list-style: none;
   margin: 0;
-  padding: 0;
   padding: 12px 0 10px;
-  // hide submenu when collapsed
-  overflow: hidden;
-  transition: height 0.25s ease-in-out;
 }
 
 .Navigation-link {
@@ -66,7 +62,6 @@ nav.is-visible {
   padding-left: 22px;
   padding-right: 16px;
   color: #333;
-  font-weight: 700;
 }
 
 .Navigation-link.active {
@@ -81,7 +76,7 @@ nav.is-visible {
 .Navigation-chevron {
   // point down \/
   transform: rotate(90deg);
-  transition: transform 0.25s ease-in-out;
+  transition: transform 0.15s ease-in-out;
 }
 
 .Navigation-chevron.is-open {
@@ -123,18 +118,25 @@ nav.is-visible {
   visibility: visible;
 }
 
+// make children in submenu grey
+.Navigation-item .Navigation-item > .Navigation-link {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+// add frame (border-top and border-bottom) to those navigation items that have sub menus
+.Navigation-item.has-children {
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+// revert grey color for those children that have children themselves
+.Navigation-item.has-children > .Navigation-link {
+  color: #333;
+}
+
 /**
  * Nested navigation
  */
 .Navigation .Navigation {
   padding: 0;
 }
-
-.Navigation-item > .Navigation > .Navigation-item > .Navigation-link {
-  padding: 10px 24px 10px 46px;
-  font-weight: 400;
-}
-
-.Navigation-item > .Navigation > .Navigation-item > .Navigation-link.active {
-  font-weight: 500;
-}
diff --git a/components/navigation/index.js b/components/navigation/index.js
index ae748a713..7351d1eaa 100644
--- a/components/navigation/index.js
+++ b/components/navigation/index.js
@@ -33,7 +33,7 @@ class Item extends React.Component {
     this.setState({
       isOpen: !this.state.isOpen
     })
-    if (item.links && !subItem) {
+    if ((item.links && !subItem) || subItem && subItem.links) {
       // simply open submenu without notifying parent or changing url
       if (e) {
         e.preventDefault()
@@ -46,7 +46,7 @@ class Item extends React.Component {
   /**
    * Update parent component and open submenu on initial render
    */
-  componentWillMount () {
+  componentDidMount () {
     if (this.props.location.pathname.includes(this.props.link)) {
       this.onClick(this.props.item, this.props.subItem)
     }
@@ -56,7 +56,9 @@ class Item extends React.Component {
     const {index, link, text, onClick, links, item, subItem, location} = this.props
     const {isOpen} = this.state
     return (
-      <li className='Navigation-item'>
+      <li className={classnames('Navigation-item', {
+        'has-children': links && links.length
+      })}>
         <Link
           activeClassName='active'
           to={link}
@@ -76,15 +78,18 @@ class Item extends React.Component {
         </Link>
         {
           links &&
-          <ul className='Navigation' style={{height: isOpen ? (links.length * height) : 0}}>
+          <ul className='Navigation' style={{
+            display: isOpen ? null : 'none'
+          }}>
             {links.map((subItem, j) =>
               <Item
                 index={index}
                 subIndex={j}
                 key={j}
-                onClick={onClick}
+                onClick={subItem.links ? this.onClick : onClick}
                 text={subItem.text}
                 link={`${link}${subItem.link}`}
+                links={subItem.links}
                 item={item}
                 subItem={subItem}
                 location={location}
diff --git a/components/navigation/test/test.js b/components/navigation/test/test.js
index 9b19bbe13..942e2e2f8 100644
--- a/components/navigation/test/test.js
+++ b/components/navigation/test/test.js
@@ -66,4 +66,63 @@ describe('Navigation', () => {
     wrapper.find('.Navigation-overlay').simulate('click')
     assert.equal(wrapper.find('.Navigation-overlay').hasClass('is-visible'), false)
   })
+
+  it('should go multiple levels deep', () => {
+    const location = {pathname: '/cars/tesla/models-s/p100d', search: '', hash: ''}
+    const wrapper = mount(
+      <LocationBroadcast value={location}>
+        <Navigation links={[
+          {text: 'Home', link: '/'},
+          {text: 'About', link: '/about'},
+          {
+            text: 'Cars',
+            link: '/cars',
+            links: [
+              {
+                text: 'Tesla',
+                link: '/tesla',
+                links: [
+                  {
+                    text: 'Model S',
+                    link: '/model-s',
+                    links: [
+                      {text: '60', link: '/60'},
+                      {text: '60D', link: '/60d'},
+                      {text: '75', link: '/75'},
+                      {text: '75D', link: '/75d'},
+                      {text: '90D', link: '/90d'},
+                      {text: 'P100D', link: '/p100d'}
+                    ]
+                  },
+                  {
+                    text: 'Model X',
+                    link: '/model-x',
+                    links: [
+                      {text: 'Ultra White Seats', link: '/white'},
+                      {text: 'Tan Leather Seats', link: '/tan'},
+                      {text: 'Black Leather Seats', link: '/black'}
+                    ]
+                  },
+                  {
+                    text: 'Model 3',
+                    link: '/model-3',
+                    links: [
+                      {text: 'Hardware', link: '/hardware'},
+                      {text: 'Safety', link: '/safety'},
+                      {text: 'Range', link: '/range'}
+                    ]
+                  }
+                ]
+              },
+              {
+                text: 'Audi',
+                link: '/audi'
+              }
+            ]
+          }
+        ]} />
+      </LocationBroadcast>
+    )
+    assert(wrapper.find('a[href]="/cars/tesla/model-s/p100d"'))
+  })
 })
diff --git a/examples/js/components/navigationRoute.js b/examples/js/components/navigationRoute.js
index 83548c94b..d8c8efd68 100644
--- a/examples/js/components/navigationRoute.js
+++ b/examples/js/components/navigationRoute.js
@@ -9,11 +9,30 @@ const defaultNavigation =
 <HashRouter>
   <div style={{position: 'relative'}}>
     <Navigation links={[
-      {text: 'Home', link: '/'},
-      {text: 'About', link: '/about'},
-      {text: 'Settings', link: '/settings', links: [
-        {text: 'Device', link: '/device'},
-        {text: 'Ethernet', link: '/ethernet'}
+      {text: 'Home', link: '/navigation'},
+      {text: 'About', link: '/navigation/about'},
+      {text: 'Cars', link: '/navigation/cars', links: [
+        {text: 'Tesla', link: '/tesla', links: [
+          {text: 'Model S', link: '/model-s', links: [
+            {text: '60', link: '/60'},
+            {text: '60D', link: '/60d'},
+            {text: '75', link: '/75'},
+            {text: '75D', link: '/75d'},
+            {text: '90D', link: '/90d'},
+            {text: 'P100D', link: '/p100d'}
+          ]},
+          {text: 'Model X', link: '/model-x', links: [
+            {text: 'Ultra White Seats', link: '/white'},
+            {text: 'Tan Leather Seats', link: '/tan'},
+            {text: 'Black Leather Seats', link: '/black'},
+          ]},
+          {text: 'Model 3', link: '/model-3', links: [
+            {text: 'Hardware', link: '/hardware'},
+            {text: 'Safety', link: '/safety'},
+            {text: 'Range', link: '/range'},
+          ]}
+        ]},
+        {text: 'Audi', link: '/audi'}
       ]}
     ]} />
   </div>
@@ -31,7 +50,7 @@ export default class NavigationRoute extends React.Component {
             The navigation component is visible on large devices. It is automatically hidden on small devices and a hamburger button is displayed, which shows it on click.
           </p>
           <p>
-            The max. level of nesting is currently two. You can have a main menu and each menu item can have multiple sub menu items.
+            You can add as many sub menues as you like. There is not limit since sub menues simply call themselves when they have links. However sub menues do not have extra paddings and are aligned like their parent. Going mutiple levels deep might confuse the user.
           </p>
           <Playground
             docClass={Navigation}