diff --git a/components/vf-navigation/vf-navigation--additional.njk b/components/vf-navigation/vf-navigation--additional.njk
deleted file mode 100644
index 416e2dee8243eb2b551e6c5fbb0877e41ea141ba..0000000000000000000000000000000000000000
--- a/components/vf-navigation/vf-navigation--additional.njk
+++ /dev/null
@@ -1,17 +0,0 @@
-<nav class="vf-navigation vf-navigation--additional">
-  <h3 class="vf-navigation__heading">European Bioinformatics Institute</h3>
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Services</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Research</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Training</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">About Us</a>
-    </li>
-  </ul>
-</nav>
diff --git a/components/vf-navigation/vf-navigation--additional.scss b/components/vf-navigation/vf-navigation--additional.scss
index 77320bc3b7c89f131f94936ed0e853514324cc54..e0c47bf7c1465fd25de391f31c37ae5aec4078e1 100644
--- a/components/vf-navigation/vf-navigation--additional.scss
+++ b/components/vf-navigation/vf-navigation--additional.scss
@@ -26,6 +26,7 @@
   .vf-navigation__link {
     @include inline-link(
       $vf-link-color: set-color(vf-color-off-white),
+      $vf-link-visited-color: set-color(vf-color-white),
       $vf-link-hover-color: set-color(vf-color-white)
     );
 
diff --git a/components/vf-navigation/vf-navigation--global.njk b/components/vf-navigation/vf-navigation--global.njk
deleted file mode 100644
index a03b6733d093a5c2f10831d45267e764e37304ce..0000000000000000000000000000000000000000
--- a/components/vf-navigation/vf-navigation--global.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-<nav class="vf-navigation vf-navigation--global">
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Explore</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Search</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Sign In</a>
-    </li>
-  </ul>
-</nav>
diff --git a/components/vf-navigation/vf-navigation--main.njk b/components/vf-navigation/vf-navigation--main.njk
deleted file mode 100644
index 206a155dd82412f1a6a4c10d5f3a0907977851b7..0000000000000000000000000000000000000000
--- a/components/vf-navigation/vf-navigation--main.njk
+++ /dev/null
@@ -1,28 +0,0 @@
-<nav class="vf-navigation vf-navigation--main">
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Home</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Download</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Release Notes</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">FAQ</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Help</a>
-    </li>
-    <li class="vf-navigation__item is-active">
-      <a href="#" class="vf-navigation__link">Licence</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">About</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Feedback</a>
-    </li>
-  </ul>
-</nav>
diff --git a/components/vf-navigation/vf-navigation.config.yml b/components/vf-navigation/vf-navigation.config.yml
index 5f6f9d72b2647498c9e3dcdfc3d4caa501e8ab60..4f0364ba8c84ebebfa8101204f21b0b5e1cfe50f 100755
--- a/components/vf-navigation/vf-navigation.config.yml
+++ b/components/vf-navigation/vf-navigation.config.yml
@@ -1,5 +1,59 @@
 title: Navigation
 label: Navigation
 preview: '@preview--blocks'
+
 context:
   component-type: block
+
+variants:
+  - name: default
+    hidden: true
+
+  - name: global
+    context:
+      classModifier: global
+      navigation:
+        - text: services
+          url: JavaScript:Void(0);
+        - text: research
+          url: JavaScript:Void(0);
+        - text: training
+          url: JavaScript:Void(0);
+        - text: about us
+          url: JavaScript:Void(0);
+
+  - name: main
+    context:
+      classModifier: main
+      navigation:
+        - text: Home
+          url: JavaScript:Void(0);
+        - text: Download
+          url: JavaScript:Void(0);
+        - text: Release Notes
+          url: JavaScript:Void(0);
+        - text: FAQ
+          url: JavaScript:Void(0);
+        - text: Help
+          url: JavaScript:Void(0);
+        - text: Licence
+          url: JavaScript:Void(0);
+        - text: About
+          url: JavaScript:Void(0);
+        - text: Feedback
+          url: JavaScript:Void(0);
+
+  - name: additional
+    context:
+      heading: European Bioinformatics Institute
+      classModifier: additional
+      title: European Bioinformatics Institute
+      navigation:
+        - text: services
+          url: JavaScript:Void(0);
+        - text: research
+          url: JavaScript:Void(0);
+        - text: training
+          url: JavaScript:Void(0);
+        - text: about us
+          url: JavaScript:Void(0);
diff --git a/components/vf-navigation/vf-navigation.njk b/components/vf-navigation/vf-navigation.njk
index 8b637e61b7399ff546a57137dc97a3d7ab0d6dbd..5aee1e641bbe434cc8c14bf6e03e7451cec0b3c7 100755
--- a/components/vf-navigation/vf-navigation.njk
+++ b/components/vf-navigation/vf-navigation.njk
@@ -1 +1,12 @@
-See primary, secondary, and tertiary variants.
+<nav class="vf-navigation {%- if classModifier %} vf-navigation--{{ classModifier }}{% endif %}">
+  {% if heading %}
+  <h3 class="vf-navigation__heading">{{ heading }}</h3>
+  {% endif %}
+  <ul class="vf-navigation__list | vf-list--inline">
+    {% for item in navigation %}
+    <li class="vf-navigation__item">
+      <a href="{{ item.url }}" class="vf-navigation__link">{{ item.text }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</nav>