diff --git a/content/about/about.erb b/content/about/about.erb
index 37dd8f1..9691a6c 100644
--- a/content/about/about.erb
+++ b/content/about/about.erb
@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: about
+  name: Zeus WPI
+  order: 100
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'about' %>
 <h1 class="title is-1 has-text-centered">About Zeus WPI</h1>
 
 <div class="content">
diff --git a/content/about/historiek.erb b/content/about/historiek.erb
index ac037ef..eb367f9 100644
--- a/content/about/historiek.erb
+++ b/content/about/historiek.erb
@@ -1,8 +1,13 @@
 ---
 narrow_page: true
 typography: true
+subnavigation:
+  bar: about
+  identifier: historiek
+  name: Historiek
+  order: 400
 ---
-<%= render '/partials/_about_sub_navbar.*', selected: 'historiek' %>
+
 <h1 class="title is-1 has-text-centered">Historiek</h1>
 
 <div class="timeline">
diff --git a/content/about/oud-bestuur.erb b/content/about/oud-bestuur.erb
index 0c80850..eea600b 100644
--- a/content/about/oud-bestuur.erb
+++ b/content/about/oud-bestuur.erb
@@ -1,9 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: oud-bestuur
+  name: Oud-bestuur
+  order: 500
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'oud-bestuur' %>
-
 <h1 class="title is-1 has-text-centered">Oud-bestuur</h1>
 
 <div class="content">
diff --git a/content/about/privacy.erb b/content/about/privacy.erb
index c6595fe..a245ab3 100644
--- a/content/about/privacy.erb
+++ b/content/about/privacy.erb
@@ -3,8 +3,13 @@ title: Privacybeleid
 narrow_page: true
 typography: true
 toc: true
+subnavigation:
+  bar: about
+  identifier: privacy
+  name: Privacybeleid
+  order: 300
 ---
-<%= render '/partials/_about_sub_navbar.*', selected: 'privacy' %>
+
 <h1 class="title is-1 has-text-centered" id="top">Privacybeleid</h1>
 <div id="table-of-contents" class="menu column is-4">
   <p class="menu-label">
diff --git a/content/about/sponsorende-leden.erb b/content/about/sponsorende-leden.erb
index 8291ec8..44c6a54 100644
--- a/content/about/sponsorende-leden.erb
+++ b/content/about/sponsorende-leden.erb
@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: sponsorende-leden
+  name: Sponsorende leden
+  order: 700
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring-members' %>
 <h1 class='title is-1 has-text-centered'>Sponsorende leden</h1>
 
 <div id='sponsoring-members' class="content">
diff --git a/content/about/statuten.md b/content/about/statuten.md
index 80ab08c..7924e27 100644
--- a/content/about/statuten.md
+++ b/content/about/statuten.md
@@ -1,9 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: statuten
+  name: Statuten
+  order: 200
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'statuten' %>
-
 # Statuten
 {:.title.is-1.has-text-centered}
 
diff --git a/content/about/verslagen.erb b/content/about/verslagen.erb
index 7c64e6c..a4e4751 100644
--- a/content/about/verslagen.erb
+++ b/content/about/verslagen.erb
@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: verslagen
+  name: Verslagen
+  order: 600
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'verslagen' %>
 <h1 class="title is-1 has-text-centered">Reports</h1>
 
 <div class="content">
diff --git a/layouts/generic.erb b/layouts/generic.erb
index c6f01bf..de2df05 100644
--- a/layouts/generic.erb
+++ b/layouts/generic.erb
@@ -4,6 +4,9 @@
   </header>
   <main class="section">
     <% if item[:narrow_page] %>
+    <% if item[:subnavigation] %>
+    <%= render '/partials/_sub_navbar.*', selected: item[:subnavigation][:identifier] %>
+    <% end %>
     <div class="columns">
       <article class="column is-8 is-offset-2 <%= 'toc-container' if @item[:toc] %>">
     <% end %>
diff --git a/layouts/partials/_about_sub_navbar.erb b/layouts/partials/_about_sub_navbar.erb
deleted file mode 100644
index 9f712f1..0000000
--- a/layouts/partials/_about_sub_navbar.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="subnav tabs">
-  <ul>
-    <li class="<%= 'is-active' if @selected == 'about'%>"><a href="/about/about">Zeus WPI</a></li>
-    <li class="<%= 'is-active' if @selected == 'statuten'%>"><a href="/about/statuten">Statuten</a></li>
-    <li class="<%= 'is-active' if @selected == 'privacy'%>"><a href="/about/privacy">Privacybeleid</a></li>
-    <li class="<%= 'is-active' if @selected == 'historiek'%>"><a href="/about/historiek">Historiek</a></li>
-    <li class="<%= 'is-active' if @selected == 'oud-bestuur'%>"><a href="/about/oud-bestuur">Oud-bestuur</a></li>
-    <li class="<%= 'is-active' if @selected == 'verslagen'%>"><a href="/about/verslagen">Verslagen</a></li>
-    <li class="<%= 'is-active' if @selected == 'sponsoring-members'%>"><a href="/about/sponsorende-leden">Sponsorende leden</a></li>
-  </ul>
-</div>
diff --git a/layouts/partials/_sub_navbar.erb b/layouts/partials/_sub_navbar.erb
new file mode 100644
index 0000000..ce9bcee
--- /dev/null
+++ b/layouts/partials/_sub_navbar.erb
@@ -0,0 +1,11 @@
+<div class="subnav tabs is-centered">
+  <ul>
+    <% subnavigables(@item[:subnavigation][:bar]).map { |e| e[:subnavigation] }.each do |nav| %>
+    <li class="<%= 'is-active' if @selected == nav[:identifier] %>">
+      <a href="<%= "/#{nav[:bar]}/#{nav[:identifier]}" %>">
+        <%= nav[:name] %>
+      </a>
+    </li>
+    <% end %>
+  </ul>
+</div>
diff --git a/lib/helpers/nav.rb b/lib/helpers/nav.rb
index 0df57e2..8905adb 100644
--- a/lib/helpers/nav.rb
+++ b/lib/helpers/nav.rb
@@ -12,4 +12,11 @@ module NavigationHelper
   def navigables
     items.select { |i| i[:navigable] }.sort_by { |x| x[:order] || 10_000 }
   end
+
+
+  def subnavigables(bar)
+    items
+      .select { |i| i.attributes.dig(:subnavigation, :bar) == bar }
+      .sort_by { |x| x[:subnavigation][:order] || 10_000 }
+  end
 end