diff --git a/examples/css/docs-page.css b/examples/css/docs-page.css
index cf2a6142..8fb52ceb 100644
--- a/examples/css/docs-page.css
+++ b/examples/css/docs-page.css
@@ -30,8 +30,8 @@ p.docs-page__paragraph {
     margin: 0 0 1em;
 }
 .docs-page .link {
-	color: #5eadc8;
-	text-decoration: none;
+    color: #5eadc8;
+    text-decoration: none;
 }
 .docs-page__header {
     background: #5eadc8;
@@ -52,6 +52,7 @@ p.docs-page__paragraph {
     overflow: hidden;
 }
 .docs-page__sidebar {
+    position: fixed;
     float: left;
     width: 220px;
     padding: 30px 15px;
@@ -59,6 +60,7 @@ p.docs-page__paragraph {
 }
 .docs-page__content {
     float: left;
+    margin-left: 220px;
     min-width: 600px;
 }
 .docs-page__nav {
diff --git a/examples/index.html b/examples/index.html
index eddc5b1d..29fb5a55 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -17,8 +17,8 @@ <h1 class="docs-page__h1">Superdesk UI Framework</h1>
         </header>
         <main class="docs-page__container-fluid">
             <aside class="docs-page__sidebar">
-                <ul class="docs-page__nav">
-                    <li class="active"><a href="#buttons">Buttons</a></li>
+                <ul class="docs-page__nav" doc-nav>
+                    <li><a href="#buttons">Buttons</a></li>
                     <li><a href="#labels">Labels</a></li>
                     <li><a href="#badge">Badge</a></li>
                 </ul>
diff --git a/examples/js/index.js b/examples/js/index.js
index 177ee3de..dcb00da7 100644
--- a/examples/js/index.js
+++ b/examples/js/index.js
@@ -32,6 +32,7 @@ angular.module('ui-docs', [
             element.html(window.prettyPrintOne(_.escape(element.html()), langExtension, true));
         }
     };
+
 }).directive('docTabs', function () {
     return {
         link: function (scope, elem, attr, ctrl) {
@@ -42,4 +43,35 @@ angular.module('ui-docs', [
             });
         }
     };
+
+}).directive('docNav', function ($window) {
+    return {
+        link: function (scope, elem, attr, ctrl) {
+            elem.find('a[href*="#"]:not([href="#"])').click(function () {
+                var target = $(this.hash);
+                if (target.length) {
+                    $('html, body').animate({
+                        scrollTop: target.offset().top
+                    }, 1000);
+                    return false;
+                }
+            });
+
+            angular.element($window).bind("scroll", onScroll);
+
+            function onScroll() {
+                var scrollPos = $(document).scrollTop();
+                elem.find('a').each(function () {
+                    var currLink = $(this);
+                    var refElement = $(currLink.attr("href"));
+                    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
+                        elem.find('a').removeClass("active");
+                        currLink.parent().addClass("active");
+                    } else {
+                        currLink.parent().removeClass("active");
+                    }
+                });
+            }
+        }
+    };
 });