diff --git a/.github/workflows/beta.yml b/.github/workflows/beta.yml
index acecb8cf23..56effc2941 100644
--- a/.github/workflows/beta.yml
+++ b/.github/workflows/beta.yml
@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
@@ -44,7 +44,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
diff --git a/.github/workflows/next.yml b/.github/workflows/next.yml
index 14e682e0d0..917cf2afa0 100644
--- a/.github/workflows/next.yml
+++ b/.github/workflows/next.yml
@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
@@ -83,7 +83,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
@@ -117,7 +117,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
     steps:
       - name: Download Artifact (Docs)
         uses: actions/download-artifact@master
diff --git a/.github/workflows/sonar-cloud.yml b/.github/workflows/sonar-cloud.yml
index 8bc9527ddb..f0ed4a750d 100644
--- a/.github/workflows/sonar-cloud.yml
+++ b/.github/workflows/sonar-cloud.yml
@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ca5fb91929..c3e22a1e2f 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -12,7 +12,7 @@ jobs:
       matrix:
         os: [ubuntu-latest]
         #os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [19]
+        node: [20]
 
     steps:
       - uses: actions/setup-node@v4
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 75d5a7bef1..f18e60ad72 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -19,7 +19,19 @@ export default defineConfig(() => ({
         {
           find: /^.*\/VPNavBarTitle\.vue$/,
           replacement: fileURLToPath(
-            new URL('./components/VPNavBarTitle.vue', import.meta.url)
+            new URL('../components/VPNavBarTitle.vue', import.meta.url)
+          )
+        },
+        {
+          find: /^.*\/VPNavBarMenu\.vue$/,
+          replacement: fileURLToPath(
+            new URL('../components/VPNavBarMenu.vue', import.meta.url)
+          )
+        },
+        {
+          find: /^.*\/VPNavScreenMenu\.vue$/,
+          replacement: fileURLToPath(
+            new URL('../components/VPNavScreenMenu.vue', import.meta.url)
           )
         }
       ]
diff --git a/docs/.vitepress/navigation.mjs b/docs/.vitepress/navigation.mjs
index 53e60ac0a5..805de8d9c7 100644
--- a/docs/.vitepress/navigation.mjs
+++ b/docs/.vitepress/navigation.mjs
@@ -1,14 +1,5 @@
 export default {
-  nav: [
-    {
-      text: 'Version',
-      items: [
-        { text: 'v3', link: '/' },
-        { text: 'v2', link: '/v2/' },
-        { text: 'v1', link: '/v1/' }
-      ]
-    }
-  ],
+  version: [{ version: 3, isDefault: true }, { version: 2 }, { version: 1 }],
 
   sidebar: {
     '/v1/': [
diff --git a/docs/.vitepress/components/Logo.vue b/docs/components/Logo.vue
similarity index 100%
rename from docs/.vitepress/components/Logo.vue
rename to docs/components/Logo.vue
diff --git a/docs/components/VPNavBarMenu.vue b/docs/components/VPNavBarMenu.vue
new file mode 100644
index 0000000000..84ebc4d694
--- /dev/null
+++ b/docs/components/VPNavBarMenu.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { useData } from 'vitepress/dist/client/theme-default/composables/data';
+import VPNavBarMenuLink from 'vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue';
+import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue';
+import { useVersion } from '../composables/version.mjs';
+
+const { theme } = useData();
+
+const { nav: versionNav } = useVersion();
+</script>
+
+<template>
+  <div>
+    <nav
+      v-if="versionNav"
+      aria-labelledby="main-nav-aria-label"
+      class="VPNavBarMenu"
+    >
+      <span id="main-nav-aria-label" class="visually-hidden"
+        >Version Navigation</span
+      >
+      <template v-for="item in versionNav" :key="item.text">
+        <v-p-nav-bar-menu-link v-if="'link' in item" :item="item" />
+        <v-p-nav-bar-menu-group v-else :item="item" />
+      </template>
+    </nav>
+    <nav
+      v-if="theme.nav"
+      aria-labelledby="main-nav-aria-label"
+      class="VPNavBarMenu"
+    >
+      <span id="main-nav-aria-label" class="visually-hidden"
+        >Main Navigation</span
+      >
+      <template v-for="item in theme.nav" :key="item.text">
+        <v-p-nav-bar-menu-link v-if="'link' in item" :item="item" />
+        <v-p-nav-bar-menu-group v-else :item="item" />
+      </template>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+/* stylelint-disable selector-class-pattern */
+.VPNavBarMenu {
+  display: none;
+}
+
+@media (width >=768px) {
+  .VPNavBarMenu {
+    display: flex;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/VPNavBarTitle.vue b/docs/components/VPNavBarTitle.vue
similarity index 100%
rename from docs/.vitepress/components/VPNavBarTitle.vue
rename to docs/components/VPNavBarTitle.vue
diff --git a/docs/components/VPNavScreenMenu.vue b/docs/components/VPNavScreenMenu.vue
new file mode 100644
index 0000000000..128a700d18
--- /dev/null
+++ b/docs/components/VPNavScreenMenu.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress/dist/client/theme-default/composables/data';
+import VPNavScreenMenuLink from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue';
+import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue';
+import { useVersion } from '../composables/version.mjs';
+
+const { theme } = useData();
+const { nav: versionNav } = useVersion();
+</script>
+
+<template>
+  <div>
+    <nav v-if="versionNav" class="VPNavScreenMenu">
+      <template v-for="item in versionNav" :key="item.text">
+        <v-p-nav-screen-menu-link v-if="'link' in item" :item="item" />
+        <v-p-nav-screen-menu-group
+          v-else
+          :text="item.text || ''"
+          :items="item.items"
+        />
+      </template>
+    </nav>
+    <nav v-if="theme.nav" class="VPNavScreenMenu">
+      <template v-for="item in theme.nav" :key="item.text">
+        <v-p-nav-screen-menu-link v-if="'link' in item" :item="item" />
+        <v-p-nav-screen-menu-group
+          v-else
+          :text="item.text || ''"
+          :items="item.items"
+        />
+      </template>
+    </nav>
+  </div>
+</template>
diff --git a/docs/composables/version.mjs b/docs/composables/version.mjs
new file mode 100644
index 0000000000..4dc551158d
--- /dev/null
+++ b/docs/composables/version.mjs
@@ -0,0 +1,42 @@
+import { useData } from 'vitepress/dist/client/theme-default/composables/data';
+import { computed } from 'vue';
+
+export function useVersion() {
+  const { theme, page } = useData();
+
+  const defaultVersion = computed(
+    () => theme.value.version.find(({ isDefault }) => isDefault)?.version
+  );
+
+  const currentVersion = computed(() =>
+    Number(
+      (/v(\d+)\/.*/.test(page.value.relativePath) &&
+        page.value.relativePath.replace(/v(\d+)\/.*/, '$1')) ||
+        defaultVersion.value
+    )
+  );
+
+  const nav = computed(() => {
+    return (
+      theme.value.version?.length && [
+        {
+          text: `v${currentVersion.value}`,
+          items: theme.value.version
+            .filter(({ version }) => version !== currentVersion.value)
+            .map(({ version, isDefault }) => {
+              return {
+                text: `v${version}`,
+                link: isDefault ? '/' : `/v${version}/`
+              };
+            })
+        }
+      ]
+    );
+  });
+
+  return {
+    defaultVersion,
+    currentVersion,
+    nav
+  };
+}