diff --git a/package-lock.json b/package-lock.json
index bdf3d3f..e028b3b 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/src/main/css/common.css b/src/main/css/common.css
index 35e10e7..f2a11bc 100644
--- a/src/main/css/common.css
+++ b/src/main/css/common.css
@@ -1,14 +1,13 @@
 :root {
     --fwdekker-theme-color: #0033cc;
+    --fwdekker-theme-color-dark: #00279d;
 }
 
-html {
+html, body {
     height: 100%;
 }
 
-body {
-    position: relative;
-
+#contents {
     padding-top: 5rem;
     padding-bottom: 9rem; /* Vertical footer paddings + 1 */
     min-height: 100%;
diff --git a/src/main/css/nav.css b/src/main/css/nav.css
index e69de29..99fcc1a 100644
--- a/src/main/css/nav.css
+++ b/src/main/css/nav.css
@@ -0,0 +1,70 @@
+.nav {
+    margin: 0;
+    width: 100%;
+
+    background-color: var(--fwdekker-theme-color);
+    font-size: 120%;
+
+    --padding: calc(2em / 3);
+}
+
+.nav * {
+    z-index: 10;
+}
+
+.nav a {
+    display: inline-block;
+    margin: 0;
+    padding: calc(var(--padding)) calc(var(--padding));
+    width: 100%;
+
+    vertical-align: middle;
+    color: white;
+}
+
+.nav ul {
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+}
+
+.nav li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+
+    position: relative;
+    background-color: var(--fwdekker-theme-color);
+}
+
+.nav li:hover,
+.nav li:focus-within {
+    cursor: pointer;
+    background-color: var(--fwdekker-theme-color-dark);
+}
+
+.nav img.logo {
+    margin-right: calc(1em / 3);
+    height: calc(1em + var(--padding));
+
+    vertical-align: middle;
+    filter: brightness(0) invert(1);
+}
+
+
+.nav ul li ul {
+    display: none;
+    position: absolute;
+    left: 0;
+}
+
+.nav ul li:hover > ul,
+.nav ul li:focus-within > ul,
+.nav ul li ul:hover {
+    display: block;
+}
+
+.nav ul li ul li {
+    width: 100%;
+}
diff --git a/src/main/js/Template.js b/src/main/js/Template.js
index 7d2c436..494d639 100644
--- a/src/main/js/Template.js
+++ b/src/main/js/Template.js
@@ -2,6 +2,7 @@ import h from "hyperscript";
 import "normalize.css/normalize.css";
 import "milligram/dist/milligram.css";
 import "../css/common.css";
+import "../css/nav.css";
 
 
 /**
@@ -30,6 +31,43 @@ export const doAfterLoad = function (fun) {
 };
 
 
+/**
+ * Creates a navigation element for navigating through the website.
+ *
+ * @returns {HTMLElement} a navigation element
+ */
+export const nav = function () {
+    return h("nav.nav",
+        h("ul",
+            h("li", h("a", {href: "https://fwdekker.com/"},
+                h("img.logo", {src: "https://fwdekker.com/favicon.png"}),
+                h("b", "FWDekker")
+            )),
+            h("li", h("a", {href: "#", innerHTML: "Tools ▾"}),
+                h("ul",
+                    h("li",
+                        h("a", "Converter", {href: "https://fwdekker.com/tools/converter/"})
+                    ),
+                    h("li",
+                        h("a", "Dice", {href: "https://fwdekker.com/tools/dice/"})
+                    ),
+                    h("li",
+                        h("a", "Doomsday", {href: "https://fwdekker.com/tools/doomsday/"})
+                    ),
+                    h("li",
+                        h("a", "Interlanguage Checker", {href: "https://fwdekker.com/tools/interlanguage-checker/"})
+                    ),
+                    h("li",
+                        h("a", "Random FO76", {href: "https://fwdekker.com/tools/random-fo76/"})
+                    ),
+                )
+            ),
+            h("li", h("a", "Gitea", {href: "https://git.fwdekker.com/"})),
+            h("li", h("a", "Blog", {href: "https://blog.fwdekker.com/"}))
+        )
+    );
+};
+
 /**
  * Creates a header element with the given title and description.
  *