diff --git a/app/config/sculpin_site.yml b/app/config/sculpin_site.yml
index 92ac77df..f4e1abf0 100644
--- a/app/config/sculpin_site.yml
+++ b/app/config/sculpin_site.yml
@@ -18,4 +18,5 @@ imports:
     - ../../data/companies.yml
     - ../../data/events.yml
     - ../../data/links.yml
+    - ../../data/menus.yml
     - ../../data/work.yml
diff --git a/data/menus.yml b/data/menus.yml
new file mode 100644
index 00000000..a813ebd9
--- /dev/null
+++ b/data/menus.yml
@@ -0,0 +1,36 @@
+menus:
+    main:
+        about:
+            title: 'About'
+            href: '/'
+            pattern: '^/.$'
+
+        articles:
+            title: 'Articles'
+            href: '/articles'
+            pattern: '^/articles/?'
+
+        talks:
+            title: 'Talks'
+            href: '/talks'
+            pattern: '^/talks/?'
+
+        podcasts:
+            title: 'Podcasts'
+            href: '/podcasts'
+            pattern: '^/podcasts/?'
+
+        projects:
+            title: 'Projects'
+            href: '/projects'
+            pattern: '^/projects/?$'
+
+        book:
+            title: 'Book'
+            href: '/test-driven-drupal'
+            pattern: '^/test-driven-drupal/?$'
+
+        contact:
+            title: 'Contact'
+            href: '/contact'
+            pattern: '^/contact/?'
diff --git a/resources/js/app.js b/resources/js/app.js
index 26960f55..104d9967 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,9 +1,19 @@
-import Navbar from './components/Navbar'
 import Vue from 'vue'
 
 window.hljs = require('highlightjs')
 
 new Vue({
-  el: '#app',
-  components: { Navbar }
+  el: '#nav',
+
+  methods: {
+    toggle () {
+      this.isOpen = !this.isOpen
+    }
+  },
+
+  data () {
+    return {
+      isOpen: false
+    }
+  }
 })
diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
deleted file mode 100644
index 5e80ef3c..00000000
--- a/resources/js/components/Navbar.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <div class="md:flex">
-      <div class="w-full flex items-center md:w-1/3 lg:w-1/4">
-        <div class="w-3/4 py-6">
-          <div class="text-sm">
-            <a
-              href="/"
-              class="font-semibold text-white"
-              tabindex="-1"
-            >
-              {{ siteTitle }}
-            </a>
-          </div>
-        </div>
-
-        <div class="w-1/4 text-right flex items-center justify-end md:hidden">
-          <button
-            type="button"
-            class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
-            aria-label="Toggle main menu"
-            @click="isOpen = !isOpen"
-          >
-            <svg
-              v-if="!isOpen"
-              class="fill-current text-inherit w-6 h-6"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-            ><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z" /></svg>
-
-            <svg
-              v-if="isOpen"
-              class="fill-current text-inherit w-5 h-5"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z"
-              fill-rule="evenodd"
-            /></svg>
-          </button>
-        </div>
-      </div>
-
-      <nav
-        class="block w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0"
-        :class="{ hidden: !isOpen }"
-        role="navigation"
-      >
-        <a
-          v-for="(item, index) in items"
-          :key="index"
-          class="block py-3 px-4 mx-4 mt-1 -mb-px rounded text-sm text-white no-underline hover:underline focus:outline-none focus:underline md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0"
-          :class="{ 'cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700': isActive(item) }"
-          :href="item.href"
-          :aria-current="isActive(item) ? 'page' : false"
-        >
-          <span class="flex items-center h-full">{{ item.title }}</span>
-        </a>
-      </nav>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    siteTitle: {
-      type: String,
-      required: true
-    },
-    pageUrl: {
-      type: String,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      isOpen: false,
-
-      items: [
-        {
-          title: 'About',
-          href: '/',
-          pattern: '^/.$'
-        },
-        {
-          title: 'Articles',
-          href: '/articles',
-          pattern: '^/articles/?'
-        },
-        {
-          title: 'Talks',
-          href: '/talks',
-          pattern: '^/talks/?'
-        },
-        {
-          title: 'Podcasts',
-          href: '/podcasts',
-          pattern: '^/podcasts/?'
-        },
-        {
-          title: 'Projects',
-          href: '/projects',
-          pattern: '^/projects/?$'
-        },
-        {
-          title: 'Book',
-          href: '/test-driven-drupal',
-          pattern: '^/test-driven-drupal/?$'
-        },
-        {
-          title: 'Contact',
-          href: '/contact',
-          pattern: '^/contact/?'
-        }
-      ],
-    }
-  },
-
-  methods: {
-    isActive (item) {
-      return this.pageUrl.match(new RegExp(item.pattern))
-    }
-  }
-}
-</script>
diff --git a/source/_layouts/app.html.twig b/source/_layouts/app.html.twig
index fff9be42..cd759c49 100644
--- a/source/_layouts/app.html.twig
+++ b/source/_layouts/app.html.twig
@@ -21,7 +21,7 @@
         {% endfor %}
     </head>
     <body class="antialiased font-sans text-gray-800 leading-relaxed">
-        <div id="app" class="min-h-screen flex flex-col" v-cloak>
+        <div id="app" class="min-h-screen flex flex-col">
             {% block body %}{% endblock %}
         </div>
 
diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig
index de7f5831..5ec75d77 100644
--- a/source/_partials/layout/navbar.html.twig
+++ b/source/_partials/layout/navbar.html.twig
@@ -1,13 +1,49 @@
-<div class="w-full fixed top-0 mb-6 z-20 bg-blue-500 border-b-3 border-blue-700">
+<div id="nav" class="w-full fixed top-0 mb-6 z-20 bg-blue-500 border-b-3 border-blue-700">
     <div class="container">
-        <div class="block py-6 v-cloak-block">
-            <div class="text-sm">
-                <a href="/" class="font-semibold text-white" tabindex="-1">
-                    {{ site.title }}
-                </a>
+            <div class="md:flex">
+                <div class="w-full flex items-center md:w-1/3 lg:w-1/4">
+                    <div class="w-3/4 py-6">
+                        <div class="text-sm">
+                            <a href="{{ site.menus.main.about.href }}" class="font-semibold text-white" tabindex="-1">
+                                {{ site.title }}
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="w-1/4 text-right flex items-center justify-end md:hidden">
+                        <button
+                            type="button"
+                            class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
+                            aria-label="Toggle main menu"
+                            @click="toggle"
+                        >
+                            <svg class="fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <path v-if="!isOpen" d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/>
+                                <path v-else d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z" fill-rule="evenodd"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <nav
+                    class="w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0"
+                    :class="[ isOpen ? 'block' : 'hidden' ]"
+                    role="navigation"
+                >
+                    {% for item in site.menus.main %}
+                        {% set currentPage = page.url matches '#' ~ item.pattern ~ '#' %}
+                        <a
+                            class="mx-4 mt-1 -mb-px py-3 px-4 block rounded text-sm text-white no-underline hover:underline focus:outline-none focus:underline md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0
+                                {{ currentPage ? 'cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700' }}"
+                            href="{{ item.href }}"
+                            {% if currentPage %}aria-current="page"{% endif %}
+                        >
+                            <span class="flex items-center h-full">
+                                {{ item.title }}
+                            </span>
+                        </a>
+                    {% endfor %}
+                </nav>
             </div>
         </div>
-
-        <navbar site-title="{{ site.title }}" page-url="{{ page.url }}"></navbar>
-    </div>
 </div>