diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js
index 6e7090e..5f352b6 100644
--- a/gulp.d/tasks/build.js
+++ b/gulp.d/tasks/build.js
@@ -102,10 +102,8 @@ module.exports = (src, dest, preview) => () => {
     ),
     vfs.src('helpers/*.js', opts),
     vfs.src('layouts/*.hbs', opts),
-    vfs.src('partials/*.hbs', opts)
-      .pipe(replace('@@antora-ui-version', git.isTagDirty() ? git.long() : git.tag()))
-  ).pipe(vfs.dest(dest, { sourcemaps: sourcemaps && '.' })
-  )
+    vfs.src('partials/*.hbs', opts).pipe(replace('@@antora-ui-version', git.isTagDirty() ? git.long() : git.tag()))
+  ).pipe(vfs.dest(dest, { sourcemaps: sourcemaps && '.' }))
 }
 
 function bundle ({ base: basedir, ext: bundleExt = '.bundle.js' }) {
diff --git a/src/helpers/versionTree.js b/src/helpers/versionTree.js
index d5810b1..2efb15e 100644
--- a/src/helpers/versionTree.js
+++ b/src/helpers/versionTree.js
@@ -1,12 +1,17 @@
 'use strict'
 
+module.exports = (components) => versionTree(components)
+
+function versionTree (components) {
+  for (const [, component] of Object.entries(components)) {
+    component.versionTree = splitVersions(component.versions)
+  }
+  return components
+}
+
 function splitVersions (versions) {
-  const snapshot = versions.filter((v) => v.version.includes('SNAPSHOT'))
-  const stable = versions.filter((v) => {
-    const split = v.version.split('-')
-    if (split.length === 1) return true
-    return false
-  })
+  const snapshot = versions.filter((v) => v.displayVersion.includes('SNAPSHOT'))
+  const stable = versions.filter((v) => !v.displayVersion.includes('-'))
   const preview = versions.filter((v) => !snapshot.includes(v) && !stable.includes(v))
   return {
     snapshot: snapshot.length > 0 ? snapshot : null,
@@ -14,12 +19,3 @@ function splitVersions (versions) {
     preview: preview.length > 0 ? preview : null,
   }
 }
-
-module.exports = (components) => {
-  return Object.values(components)?.map((comp) => {
-    return {
-      ...comp,
-      versions: splitVersions(comp.versions),
-    }
-  })
-}
diff --git a/src/js/vendor/redirect.js b/src/js/vendor/redirect.js
index 98bbf08..debfab2 100644
--- a/src/js/vendor/redirect.js
+++ b/src/js/vendor/redirect.js
@@ -8,7 +8,7 @@
     const params = new URLSearchParams(window.location.search)
     const page = params.get('page') || ''
     const fragment = window.location.hash
-    const pageAndFragment = page + ((fragment.length === 1) ? '' : fragment)
+    const pageAndFragment = page + (fragment.length === 1 ? '' : fragment)
     let foundForFragment
     let foundForPageAndFragment
     const candidates = document.querySelector('body ul')
diff --git a/src/partials/version.hbs b/src/partials/version.hbs
index 0da5636..445d44b 100644
--- a/src/partials/version.hbs
+++ b/src/partials/version.hbs
@@ -7,23 +7,52 @@
               </button>
               <div class="colset">
                 <div class="col-left">
+
                   <ul class="nav-versions">
-                    {{#each site.components}}
-                    <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-                      <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
-                      <ul class="versions">
-                        {{#each ./versions}}
-                        <li class="version
-                          {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
-                          {{~#if (eq this ../latest)}} is-latest{{/if}}">
-                          <a href="{{{relativize ./url}}}">
-                            {{./displayVersion}}
-                            {{~#if (eq this ../latest)}}<span class="current">current</span>{{/if}}
-                          </a>
-                        </li>
-                        {{/each}}
-                      </ul>
-                    </li>
+                    {{#each (versionTree site.components)}}
+                      <li class="component">
+                        <div>
+                          <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
+                        </div>
+
+                        
+                        {{~#if (notEmpty ./versionTree.stable)}}
+                        <div class="version-item is-active">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Stable
+                            </button>
+                          </div>
+                          {{> version-nav ./versionTree.stable}}
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versionTree.preview)}}
+                        <div class="version-item">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Preview
+                            </button>
+                          </div>
+                          {{> version-nav ./versionTree.preview}}
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versionTree.snapshot)}}
+                        <div class="version-item">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Snapshot
+                            </button>
+                          </div>
+                          {{> version-nav ./versionTree.snapshot}}
+                        </div>
+                        {{/if}}
+                        
+                      </li>
                     {{/each}}
                   </ul>
                 </div>
diff --git a/test/versionTree-test.js b/test/versionTree-test.js
index c4d4ba3..c456ec9 100644
--- a/test/versionTree-test.js
+++ b/test/versionTree-test.js
@@ -6,53 +6,54 @@ const versionTree = require('../src/helpers/versionTree.js')
 
 describe('versionTree', () => {
   it('should return stable, preview and snapshot  versions', () => {
-    const result = versionTree([
-      {
+    const result = versionTree({
+      test: {
         versions: [
           {
-            version: '3.0.1-SNAPSHOT',
+            displayVersion: '3.0.1-SNAPSHOT',
           },
           {
-            version: '3.0.0-SNAPSHOT',
+            displayVersion: '3.0.0-SNAPSHOT',
           },
           {
-            version: '2.0.0',
+            displayVersion: '2.0.0',
           },
           {
-            version: '1.0.0',
+            displayVersion: '1.0.0',
           },
           {
-            version: '1.0.0-RC1',
+            displayVersion: '1.0.0-RC1',
           },
           {
-            version: '1.0.0-RC2',
+            displayVersion: '1.0.0-RC2',
           },
         ],
       },
-    ])
+    })
 
-    expect(result[0].versions.stable.length).is.eql(2)
-    expect(result[0].versions.stable[0].version).is.eql('2.0.0')
-    expect(result[0].versions.stable[1].version).is.eql('1.0.0')
+    const tree = result.test.versionTree
+    expect(tree.stable.length).is.eql(2)
+    expect(tree.stable[0].displayVersion).is.eql('2.0.0')
+    expect(tree.stable[1].displayVersion).is.eql('1.0.0')
 
-    expect(result[0].versions.preview.length).is.eql(2)
-    expect(result[0].versions.preview[0].version).is.eql('1.0.0-RC1')
-    expect(result[0].versions.preview[1].version).is.eql('1.0.0-RC2')
+    expect(tree.preview.length).is.eql(2)
+    expect(tree.preview[0].displayVersion).is.eql('1.0.0-RC1')
+    expect(tree.preview[1].displayVersion).is.eql('1.0.0-RC2')
 
-    expect(result[0].versions.snapshot.length).is.eql(2)
-    expect(result[0].versions.snapshot[0].version).is.eql('3.0.1-SNAPSHOT')
-    expect(result[0].versions.snapshot[1].version).is.eql('3.0.0-SNAPSHOT')
+    expect(tree.snapshot.length).is.eql(2)
+    expect(tree.snapshot[0].displayVersion).is.eql('3.0.1-SNAPSHOT')
+    expect(tree.snapshot[1].displayVersion).is.eql('3.0.0-SNAPSHOT')
   })
 
   it('should return an empty structure', () => {
-    const result = versionTree([
-      {
-        versions: [
-        ],
+    const result = versionTree({
+      test: {
+        versions: [],
       },
-    ])
-    expect(result[0].versions.stable).is.eql(null)
-    expect(result[0].versions.preview).is.eql(null)
-    expect(result[0].versions.snapshot).is.eql(null)
+    })
+    const tree = result.test.versionTree
+    expect(tree.stable).is.eql(null)
+    expect(tree.preview).is.eql(null)
+    expect(tree.snapshot).is.eql(null)
   })
 })