diff --git a/documentation/index.html b/documentation/index.html
index d3907c0..45f3593 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -40,25 +40,7 @@
     <div class="container">
 
       <!-- Static navbar -->
-      <nav class="navbar navbar-default">
-        <div class="container-fluid">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand">Kobalt</a>
-          </div>
-          <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-              <li><a href="../home/index.html">Home</a></li>
-              <li class="active"><a href="../documentation/index.html">Documentation</a></li>
-              <li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div><!--/.container-fluid -->
+      <nav id="kobalt-navbar" class="navbar navbar-default">
       </nav>
 
       <!-- Main component for a primary marketing message or call to action -->
@@ -602,8 +584,8 @@ If you are interested in discussing Kobalt related topics with other fellow user
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="../bootstrap/dist/js/bootstrap.min.js"></script>
-<script src="../js/toc.js"></script>
-<script>generateToc();</script>
+<script src="../js/kobalt.js"></script>
+<script>generateKobalt(1);</script>
 
 <!--
   <script src="../bootstrap/dist/js/docs.min.js"></script>
diff --git a/home/index.html b/home/index.html
index df81e6e..78d32a0 100644
--- a/home/index.html
+++ b/home/index.html
@@ -40,25 +40,7 @@
     <div class="container">
 
       <!-- Static navbar -->
-      <nav class="navbar navbar-default">
-        <div class="container-fluid">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand">Kobalt</a>
-          </div>
-          <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-              <li class="active"><a href="../home/index.html">Home</a></li>
-              <li><a href="../documentation/index.html">Documentation</a></li>
-              <li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div><!--/.container-fluid -->
+      <nav id="kobalt-navbar" class="navbar navbar-default">
       </nav>
 
       <!-- Main component for a primary marketing message or call to action -->
@@ -211,8 +193,8 @@ Is your curiosity piqued? Are you interested in writing some cool Kotlin code an
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="../bootstrap/dist/js/bootstrap.min.js"></script>
-<script src="../js/toc.js"></script>
-<script>generateToc();</script>
+<script src="../js/kobalt.js"></script>
+<script>generateKobalt(0);</script>
 
   <!--
   <script src="../../assets/js/docs.min.js"></script>
diff --git a/js/toc.js b/js/kobalt.js
similarity index 58%
rename from js/toc.js
rename to js/kobalt.js
index 58fa09d..b166123 100644
--- a/js/toc.js
+++ b/js/kobalt.js
@@ -1,3 +1,57 @@
+//
+// Nav bar
+//
+
+var content = [
+  {
+    url: "../home/index.html",
+    title: "Home"
+  },
+  {
+    url: "../documentation/index.html",
+    title: "Documentation"
+  },
+  {
+    url: "../plug-in/index.html",
+    title: "A plug-in in 10mn"
+  }
+];
+
+var before = '<div class="container-fluid">'
+  + '  <div class="navbar-header">'
+  + '    <a class="navbar-brand">Kobalt</a>'
+  + '  </div>'
+  + '  <div id="navbar" class="navbar-collapse collapse">'
+  + '    <ul class="nav navbar-nav">'
+  ;
+
+var after = '</ul>'
+  + '   </div><!--/.nav-collapse -->'
+  + '  </div><!--/.container-fluid -->'
+  + '</nav>'
+  ;
+
+function generateNavBar(index) {
+  var result = before;
+  for (var i = 0; i < content.length; i++) {
+    var cls = "";
+    if (index == i) {
+      cls = 'class="active"';
+    }
+    var c = content[i];
+    result += '<li ' + cls + '><a href="' + c.url + '">' + c.title + '</a></li>';
+  }
+  result += after;
+
+
+  var navBarElement = document.getElementById("kobalt-navbar");
+  navBarElement.innerHTML = result;
+}
+
+//
+// Table of contents
+//
+
 function countersToHeading(counters) {
     var result = "";
     for (var i = 0; i < counters.length; i++) {
@@ -56,7 +110,12 @@ function generateToc() {
     if (tocTag) {
         tocTag.innerHTML = toc;
     } else {
-        alert("Couldn't find an id " + tocId);
+        console.log("Couldn't find an id " + tocId);
     }
 
 }
+
+function generateKobalt(index) {
+  generateToc();
+  generateNavBar(index);
+}
diff --git a/plug-in/index.html b/plug-in/index.html
index c99d877..d278c3d 100644
--- a/plug-in/index.html
+++ b/plug-in/index.html
@@ -40,25 +40,7 @@
     <div class="container">
 
       <!-- Static navbar -->
-      <nav class="navbar navbar-default">
-        <div class="container-fluid">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand">Kobalt<br></a>
-          </div>
-          <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-              <li><a href="../home/index.html">Home</a></li>
-              <li><a href="../documentation/index.html">Documentation</a></li>
-              <li class="active"><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div><!--/.container-fluid -->
+      <nav id="kobalt-navbar" class="navbar navbar-default">
       </nav>
 
       <!-- Main component for a primary marketing message or call to action -->
@@ -257,6 +239,9 @@ And that's it! You can now iterate on your plug-in and upload it with additional
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="../bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="../js/kobalt.js"></script>
+<script>generateKobalt(2);</script>
+
 <!--
   <script src="../bootstrap/dist/js/docs.min.js"></script>
 -->