diff --git a/components/addComponents.js b/components/addComponents.js
new file mode 100644
index 0000000..8699376
--- /dev/null
+++ b/components/addComponents.js
@@ -0,0 +1,3 @@
+import {NavBar} from "./navBar";
+
+document.querySelector("body").append(new NavBar());
diff --git a/components/navBar.js b/components/navBar.js
new file mode 100644
index 0000000..cfd5973
--- /dev/null
+++ b/components/navBar.js
@@ -0,0 +1,41 @@
+/**
+ * Class used to create a navbar to navigate between demo pages
+ * @extends HTMLElement
+ */
+export class NavBar extends HTMLElement {
+  constructor() {
+    super();
+
+    const pathname =  window.location.pathname.split("/");
+    const page = pathname[pathname.length - 1];
+
+    this.innerHTML = ``;
+
+    const demoPages = {
+      "../index.html": "Home",
+      "wms-image-custom-proj.html": "Single Image WMS",
+      "reprojection-image.html": "Image reprojection",
+      "reprojection.html": "Raster reprojection",
+      "sphere-mollweide.html": "Sphere Mollweide",
+      "vector-projections.html": "Vector projections",
+      "bundeslander-3044.html": "Bundeslander EPSG:3044"
+    };
+
+    let i = 0;
+
+    for (const [key, value] of Object.entries(demoPages)) {
+
+      let tag = `<a `;
+      if (page === key) {
+        tag += `id="navLabelActive"`;
+      }
+
+      tag += ` class="navLabel" href="${key}">${value}</a>${i === Object.keys(demoPages).length - 1 ? `` : `<br>`}`;
+      this.innerHTML += tag;
+
+      i++;
+    }
+  }
+}
+
+customElements.define("nav-bar", NavBar);
diff --git a/demo-pages/bundeslander-3044.html b/demo-pages/bundeslander-3044.html
index 38725ac..8f35af8 100644
--- a/demo-pages/bundeslander-3044.html
+++ b/demo-pages/bundeslander-3044.html
@@ -57,6 +57,7 @@ <h3>proj4rs</h3>
 
 <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
 <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+<script type="module" src="../components/addComponents.js"></script>
 <script type="module" src="../bundeslander-3044.js"></script>
 </body>
 </html>
diff --git a/demo-pages/reprojection-image.html b/demo-pages/reprojection-image.html
index e43bce4..a857946 100644
--- a/demo-pages/reprojection-image.html
+++ b/demo-pages/reprojection-image.html
@@ -69,6 +69,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../reprojection-image.js"></script>
   </body>
 </html>
diff --git a/demo-pages/reprojection.html b/demo-pages/reprojection.html
index af7734d..5843d59 100644
--- a/demo-pages/reprojection.html
+++ b/demo-pages/reprojection.html
@@ -96,6 +96,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../reprojection.js"></script>
   </body>
 </html>
diff --git a/demo-pages/sphere-mollweide.html b/demo-pages/sphere-mollweide.html
index f90e65c..056c95f 100644
--- a/demo-pages/sphere-mollweide.html
+++ b/demo-pages/sphere-mollweide.html
@@ -65,6 +65,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../sphere-mollweide.js"></script>
   </body>
 </html>
diff --git a/demo-pages/vector-projections.html b/demo-pages/vector-projections.html
index 7a55411..493fd43 100644
--- a/demo-pages/vector-projections.html
+++ b/demo-pages/vector-projections.html
@@ -77,6 +77,7 @@ <h3>proj4rs</h3>
 
 <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
 <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+<script type="module" src="../components/addComponents.js"></script>
 <script type="module" src="../vector-projections.js"></script>
 </body>
 </html>
diff --git a/demo-pages/wms-image-custom-proj.html b/demo-pages/wms-image-custom-proj.html
index f6243f4..9f00a1f 100644
--- a/demo-pages/wms-image-custom-proj.html
+++ b/demo-pages/wms-image-custom-proj.html
@@ -47,18 +47,9 @@ <h3>proj4rs</h3>
         </pre>
     </div>
 
-    <nav>
-        <a class="navLabel" href="../index.html">Home</a><br>
-        <a id="navLabelActive" class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
-        <a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
-        <a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
-        <a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
-        <a class="navLabel" href="vector-projections.html">Vector projections</a><br>
-        <a class="navLabel" href="bundeslander-3044.html">Bundeslander EPSG:3044</a>
-    </nav>
-
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../wms-image-custom-proj.js"></script>
   </body>
 </html>
diff --git a/ressources/css/style.css b/ressources/css/style.css
index d167ab2..a82a3b3 100644
--- a/ressources/css/style.css
+++ b/ressources/css/style.css
@@ -165,7 +165,7 @@ container > div {
 
 /* Nav bar */
 
-nav {
+nav-bar {
   background-color: white;
   border-radius: 0 7px 7px 0;
   position: fixed;
@@ -178,18 +178,18 @@ nav {
   transition: ease 200ms;
 }
 
-nav > a:first-child {
+nav-bar > a:first-child {
   border-radius: 0 10px 0 0;
   border-top: solid 2px #000000;
   font-weight: bold;
 }
 
-nav > a:last-child {
+nav-bar > a:last-child {
   border-radius: 0 0 10px 0;
   border-bottom: solid 2px #000000;
 }
 
-nav:hover {
+nav-bar:hover {
   width: 200px;
   text-indent: 0;
   .navLabel {
diff --git a/vite.config.js b/vite.config.js
index 2c8857c..5de54e0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,6 +24,7 @@ export default {
         copy({
           targets: [
             { src: 'fgb/axis_orientation_neu_3044.fgb', dest: './dist/fgb' },
+            { src: 'components', dest: './dist' },
           ]
         })
       ]