diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index a06d2ea78e24e1a8601e3fe8e4a3a26c67dbf63c..332b82ffe8b92a3bedb49c21369e3ccc05d5fd4a 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -2,7 +2,7 @@ apps:
   url: apps.html
   title: Apps
   icon: package
-  counter: 8
+  label: 8
 level-1:
   title: Level 1
   icon: menu
@@ -18,6 +18,7 @@ level-1:
             level-4:
               title: Level 4
               icon: menu
+              url: menu-4.html
 docs:
   title: Documentation
   icon: file-text
@@ -28,3 +29,8 @@ changelog:
   title: Changelog
   icon: file-plus
   label: v1.0.0
+
+getting-started:
+  url: getting-started.html
+  title: Getting started
+  icon: start
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index 4a7b32b490d45e4889d647f0bf1e2ec6d48f7cd0..3241ef2ae80a6fb098c3be6812aae0d3abd4ceee 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -1,5 +1,6 @@
 ---
 title: Badges
+menu: docs.badges
 ---
 
 A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md
index baf8af04764e65f9b1977bb4c417b37bfe430c45..3ae608b5adaef953d47b2fbec4619b7a98e2bd4a 100644
--- a/pages/_docs/buttons.md
+++ b/pages/_docs/buttons.md
@@ -1,5 +1,6 @@
 ---
 title: Buttons
+menu: docs.buttons
 ---
 
 ## Default markup
diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
index 0c11711ba82d2124df94ae340a94328087f53298..2d70300e8f75b9cd16b466945d0ed1c25d5df87b 100644
--- a/pages/_docs/cards.md
+++ b/pages/_docs/cards.md
@@ -1,5 +1,6 @@
 ---
 title: Cards
+menu: docs.cards
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
 ---
 
diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md
index 6ae42b690469f0881ea552585a5bb83e698515d5..698f383fc5787f4e6b55b9b76cfd7f40acbe0ab4 100644
--- a/pages/_docs/carousel.md
+++ b/pages/_docs/carousel.md
@@ -1,5 +1,6 @@
 ---
 title: Carousel
+menu: docs.carousel
 ---
 
 The Carousel is a slideshow for cycling through elements.
diff --git a/pages/_docs/index.md b/pages/_docs/index.md
index 3245fb5bc71ced400b51e37968796fc0c79f1665..77ebbd90706854d61200552a7003e94a169496de 100644
--- a/pages/_docs/index.md
+++ b/pages/_docs/index.md
@@ -1,5 +1,6 @@
 ---
 title: Introduction
+menu: docs.index
 icon: flag
 order: -1
 ---
diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md
index 586fe09073aeba3cf04ff1dc2300314b30f73ef2..d836b5d5ec835a51c05393fa904544e3bd3abc22 100644
--- a/pages/_docs/ribbons.md
+++ b/pages/_docs/ribbons.md
@@ -1,5 +1,6 @@
 ---
 title: Ribbons
+menu: docs.ribbons
 ---
 
 ## Default markup
diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md
index 6293da16465b207532994857aac817040dbfd3e6..683184a72486984d3e8530618e42c18e09c72ec5 100644
--- a/pages/_docs/spinners.md
+++ b/pages/_docs/spinners.md
@@ -1,5 +1,6 @@
 ---
 title: Spinners
+menu: docs.spinners
 ---
 
 ## Default markup
diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md
index bddbf65e11f79816035be00c12936d71aebf80fd..2f43988f0655473b28498d480360524d5fc71ea5 100644
--- a/pages/_docs/steps.md
+++ b/pages/_docs/steps.md
@@ -1,5 +1,6 @@
 ---
 title: Steps
+menu: docs.steps
 ---
 
 Steps are progress indicators of a sequence of task steps.
diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md
index 095209f8ed5775be436c217540446f50306da7a5..1817b4e411b30dc350d461fca21e660017abb67e 100644
--- a/pages/_docs/tabs.md
+++ b/pages/_docs/tabs.md
@@ -1,5 +1,6 @@
 ---
 title: Tabs
+menu: docs.tabs
 ---
 
 ## Default markup
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index 26d397f1493e1f96ff58da49171cde247856e03f..ca5118c789d2d80077a7aa7d17a196b68aa1707a 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -1,5 +1,6 @@
 ---
 title: Toasts
+menu: docs.toasts
 ---
 
 The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md
index 17db6bd9d011321127b951b2da64845dbb5c10af..a14807a8f206079bf07bda49d70d981d2ae2c18c 100644
--- a/pages/_docs/tooltips.md
+++ b/pages/_docs/tooltips.md
@@ -1,5 +1,6 @@
 ---
 title: Tooltips
+menu: docs.tooltips
 ---
 
 The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md
index ca5e730d48a5a7b32b2bd93bfe91adc36222b4e3..96f66b2478de37cb2ff921bea401a72cee9c89a1 100644
--- a/pages/_docs/typography.md
+++ b/pages/_docs/typography.md
@@ -1,5 +1,6 @@
 ---
 title: Typography
+menu: docs.typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
 ---
 
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 9a7ae23390ed799a8d5cccebdf53431ca2d6a319..933b75ccd8727787cc2a68f65ae5f04e712d1833 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -1,38 +1,70 @@
-{% assign current-page = page.menu | default: layout.menu | split: '.' %}
-{{ current-page }}
-<ul class="sidenav-menu">
-	{% for level-1 in site.data.menu %}
-	{% assign level-1-key = level-1[0] %}
-	{% assign level-1-item = level-1[1] %}
-	<li class="sidenav-menu-item">
-		<a href="{{ site.base }}/{{ level-1-item.url }}" class="sidenav-link{% if level-1-key == current-page[0] %} active{% endif %}">
-			{% include ui/icon.html icon=level-1-item.icon class="sidenav-icon" %}
-			<span class="sidenav-link-description">{{ level-1-item.title }} ({{ level-1-key }})</span>
+<ul class="navbar-nav mb-md-4">
+   {% assign current-page = include.menu | split: '.' %}
+   {{ current-page.size }}
 
-			{% if level-1-item.counter %}
-			<span class="badge badge-green ml-auto">{{ level-1-item.counter }}</span>
-			{% endif %}
-		</a>
-		{% if level-1-item.children %}
-		<ul class="sidenav-submenu">
-			{% for level-2 in level-1-item.children %}
-			{% assign level-2-key = level-2[0] %}
-			{% assign level-2-item = level-2[1] %}
-			<li>
-				<a href="{{ level-2-item.url }}" class="sidenav-link">{{ level-2-item.title }} ({{ level-2-key }})</a>
-				{% if level-2-item.children %}
-				<ul class="sidenav-submenu">
-					{% for level-3 in level-2-item.children %}
-					{% assign level-3-key = level-3[0] %}
-					{% assign level-3-item = level-3[1] %}
-					<li><a href="{{ level-3-item.url }}" class="sidenav-link">{{ level-3-item.title }} ({{ level-3-key }})</a></li>
-					{% endfor %}
-				</ul>
-				{% endif %}
-			</li>
-			{% endfor %}
-		</ul>
-		{% endif %}
-	</li>
-	{% endfor %}
+   {% for level-1 in site.data.menu %}
+   {% assign icon = level-1[1].icon %}
+   <li class="nav-item">
+      <a class="nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+         {% include ui/icon.html icon=icon  %}
+         <span class="nav-link-text">{{ level-1[1].title }}</span>
+         {% if level-1[1].label %}
+         <span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
+         {% endif %}
+      </a>
+      {% if level-1[1].children or level-1[1].docs %}
+      <div class="collapse navbar-collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
+         <ul class="nav nav-sm flex-column">
+
+            {% if level-1[1].docs %}
+            {% assign docs-key = level-1[1].docs %}
+            {% for doc-slug in site.docs-menu[docs-key].pages %}
+            {% assign doc = site.docs | where: "slug", doc-slug | first %}
+            <li class="nav-item">
+               <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
+                  {{ doc.title }}
+               </a>
+            </li>
+            {% endfor %}
+            {% endif %}
+
+            {% for level-2 in level-1[1].children %}
+            <li class="nav-item">
+               <a class="nav-link{% if level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
+                  {{ level-2[1].title }}
+               </a>
+               {% if level-2[1].children %}
+               <div class="collapse navbar-collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
+                  <ul class="nav nav-sm flex-column">
+                     {% for level-3 in level-2[1].children %}
+                     <li class="nav-item">
+                        <a class="nav-link{% if level-3[0] == current-page[2] and current-page.size == 3 %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
+                           {{ level-3[1].title }}
+                        </a>
+
+                        {% if level-3[1].children %}
+                        <div class="collapse navbar-collapse{% if level-3[0] == current-page[2] %} show{% endif %}" id="sidebar-{{ level-3[0] }}">
+                           <ul class="nav nav-sm flex-column">
+                              {% for level-4 in level-3[1].children %}
+                              <li class="nav-item">
+                                 <a class="nav-link{% if level-4[0] == current-page[3] and current-page.size == 4 %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
+                                    {{ level-4[1].title }}
+                                 </a>
+                              </li>
+                              {% endfor %}
+                           </ul>
+                        </div>
+                        {% endif %}
+                     </li>
+                     {% endfor %}
+                  </ul>
+               </div>
+               {% endif %}
+            </li>
+            {% endfor %}
+         </ul>
+      </div>
+      {% endif %}
+   </li>
+   {% endfor %}
 </ul>
diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html
index 2a374c9a00b489332d114b1870f282957d21a137..3553dc5500bf7da3adddfe5261d8935eb462e036 100644
--- a/pages/_includes/layout/sidenav-content.html
+++ b/pages/_includes/layout/sidenav-content.html
@@ -10,85 +10,5 @@
       Docs
    </h6>
 
-   {{ page.menu }}
-
-   <ul class="navbar-nav mb-md-4">
-      {% for level-1 in site.data.menu %}
-      {% assign icon = level-1[1].icon %}
-      <li class="nav-item">
-         <a class="nav-link{% if level-1[1].active %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
-            {% include ui/icon.html icon=icon  %}
-            <span class="nav-link-text">{{ level-1[1].title }}</span>
-            {% if level-1[1].label %}
-            <span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
-            {% endif %}
-         </a>
-         {% if level-1[1].children or level-1[1].docs %}
-         <div class="collapse navbar-collapse" id="sidebar-{{ level-1[0] }}">
-            <ul class="nav nav-sm flex-column">
-
-               {% if level-1[1].docs %}
-               {% assign docs-key = level-1[1].docs %}
-               {% for p in site.docs-menu[docs-key].pages %}
-               {% assign doc = site.docs | where: "slug", p | first %}
-               <li class="nav-item">
-                  <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
-                     {{ doc.title }}
-                  </a>
-               </li>
-               {% endfor %}
-               {% endif %}
-
-               {% for level-2 in level-1[1].children %}
-               <li class="nav-item">
-                  <a {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %} class="nav-link">
-                     {{ level-2[1].title }}
-                  </a>
-                  {% if level-2[1].children %}
-                  <div class="collapse navbar-collapse" id="sidebar-{{ level-2[0] }}">
-                     <ul class="nav nav-sm flex-column">
-                        {% for level-3 in level-2[1].children %}
-                        <li class="nav-item">
-                           <a {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}  class="nav-link">
-                              {{ level-3[1].title }}
-                           </a>
-
-                           {% if level-3[1].children %}
-                           <div class="collapse navbar-collapse" id="sidebar-{{ level-3[0] }}">
-                              <ul class="nav nav-sm flex-column">
-                                 {% for level-4 in level-3[1].children %}
-                                 <li class="nav-item">
-                                    <a href="{% if level-4[1].url %}{{ level-4[1].url }}{% else %}#{% endif %}" class="nav-link">
-                                       {{ level-4[1].title }}
-                                    </a>
-                                 </li>
-                                 {% endfor %}
-                              </ul>
-                           </div>
-                           {% endif %}
-                        </li>
-                        {% endfor %}
-                     </ul>
-                  </div>
-                  {% endif %}
-               </li>
-               {% endfor %}
-            </ul>
-         </div>
-         {% endif %}
-      </li>
-      {% endfor %}
-      <li class="nav-item dropdown">
-         <a class="nav-link" href="#" >
-            {% include ui/icon.html icon="book-open" %}
-            <span class="nav-link-text">Components</span>
-         </a>
-      </li>
-      <li class="nav-item">
-         <a class="nav-link" href="#">
-            {% include ui/icon.html icon="git-branch" %}
-            <span class="nav-link-text">Changelog</span>
-         </a>
-      </li>
-   </ul>
+   {% include layout/menu.html menu=include.menu %}
 </div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1fa86f3d3ab737f12546ce52324e61ded05cdeda..682be006efb5597aa9f9bd4973d5542eb64ece45 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -180,7 +180,7 @@ $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 $sidenav-bg: $white !default;
 $sidenav-border-color: $border-color !default;
 $sidenav-dark-bg: $dark !default;
-$sidenav-link-padding-x: .5rem !default;
+$sidenav-link-padding-x: .75rem !default;
 
 //steps
 $steps-border-width: 2px !default;
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
index c21fc409cef8820a35a180d517c567785a9f36af..099ac1663536cb3374b79f706ec0b2ed5732f71b 100644
--- a/scss/layout/_sidenav.scss
+++ b/scss/layout/_sidenav.scss
@@ -18,6 +18,7 @@ Sidebar
     &:hover {
       color: $link-color;
       background: rgba($link-color, .04);
+      outline: 1px solid red;
     }
 
     > .icon {