diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 0571be397e..e5d0387699 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import navbarData from "./navbar.json";
 const getSidebar = require("./get_sidebar.js");
 
 import openEditor from "open-editor"; // Open file locally via edit
@@ -159,7 +160,9 @@ export default defineConfig({
       */
     },
 
-    nav: [],
+    dynamicNavUrl:
+      "https://raw.githubusercontent.com/PX4/PX4-Autopilot/main/docs/.vitepress/navbar.json",
+    dynamicNavInitial: navbarData.nav,
 
     socialLinks: [
       { icon: "github", link: "https://github.com/PX4/PX4-Autopilot" },
diff --git a/docs/.vitepress/theme/components/DynamicNav.vue b/docs/.vitepress/theme/components/DynamicNav.vue
deleted file mode 100644
index e8d0be8a86..0000000000
--- a/docs/.vitepress/theme/components/DynamicNav.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<template>
-  <!-- Mobile (nav-screen) layout -->
-  <div v-if="screen" class="VPDynamicNav screen">
-    <template v-for="(item, i) in nav" :key="i">
-      <a v-if="!item.items" :href="item.link" class="screen-link">{{ item.text }}</a>
-      <div v-else class="screen-group">
-        <div class="screen-group-title">{{ item.text }}</div>
-        <a
-          v-for="sub in item.items"
-          :key="sub.link"
-          :href="sub.link"
-          class="screen-item"
-        >{{ sub.text }}</a>
-      </div>
-    </template>
-  </div>
-
-  <!-- Desktop (nav-bar) layout -->
-  <div v-else class="VPDynamicNav bar" ref="containerRef">
-    <template v-for="(item, i) in nav" :key="i">
-      <!-- Simple link -->
-      <a v-if="!item.items" :href="item.link" class="bar-link">{{ item.text }}</a>
-      <!-- Dropdown group -->
-      <div v-else class="bar-group">
-        <button
-          class="bar-trigger"
-          :aria-expanded="openIndex === i"
-          @click="toggleOpen(i)"
-        >
-          {{ item.text }}
-          <svg
-            class="chevron"
-            :class="{ open: openIndex === i }"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
-        </button>
-        <div v-if="openIndex === i" class="bar-menu">
-          <a
-            v-for="sub in item.items"
-            :key="sub.link"
-            :href="sub.link"
-            class="bar-item"
-            @click="openIndex = null"
-          >{{ sub.text }}</a>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from "vue";
-import { inBrowser } from "vitepress";
-import localData from "../../navbar.json";
-
-const props = defineProps({
-  screen: { type: Boolean, default: false },
-});
-
-const CACHE_KEY = "px4-docs-navbar-cache";
-const REMOTE_URL =
-  "https://raw.githubusercontent.com/PX4/PX4-Autopilot/main/docs/.vitepress/navbar.json";
-
-const nav = ref(localData.nav);
-const openIndex = ref(null);
-const containerRef = ref(null);
-
-function toggleOpen(i) {
-  openIndex.value = openIndex.value === i ? null : i;
-}
-
-function handleClickOutside(e) {
-  if (containerRef.value && !containerRef.value.contains(e.target)) {
-    openIndex.value = null;
-  }
-}
-
-onMounted(() => {
-  if (!inBrowser) return;
-
-  // Apply cache immediately if available
-  try {
-    const cached = localStorage.getItem(CACHE_KEY);
-    if (cached) {
-      const data = JSON.parse(cached);
-      if (Array.isArray(data.nav)) nav.value = data.nav;
-    }
-  } catch {}
-
-  // Always attempt a fresh fetch; update cache on success
-  fetch(REMOTE_URL)
-    .then((res) => {
-      if (!res.ok) throw new Error("non-200");
-      return res.json();
-    })
-    .then((data) => {
-      if (Array.isArray(data.nav)) {
-        nav.value = data.nav;
-        localStorage.setItem(CACHE_KEY, JSON.stringify(data));
-      }
-    })
-    .catch(() => {});
-
-  document.addEventListener("click", handleClickOutside);
-});
-
-onUnmounted(() => {
-  if (inBrowser) document.removeEventListener("click", handleClickOutside);
-});
-</script>
-
-<style scoped>
-/* ── Desktop bar variant ── */
-.bar {
-  display: flex;
-  align-items: center;
-}
-
-.bar-link {
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  height: var(--vp-nav-height);
-  color: var(--vp-c-text-1);
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.2s;
-  white-space: nowrap;
-}
-
-.bar-link:hover {
-  color: var(--vp-c-brand-1);
-}
-
-.bar-group {
-  position: relative;
-}
-
-.bar-trigger {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 8px;
-  height: var(--vp-nav-height);
-  border: none;
-  background: transparent;
-  color: var(--vp-c-text-1);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 0.2s;
-  white-space: nowrap;
-}
-
-.bar-trigger:hover {
-  color: var(--vp-c-brand-1);
-}
-
-.chevron {
-  transition: transform 0.2s;
-}
-
-.chevron.open {
-  transform: rotate(180deg);
-}
-
-.bar-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  min-width: 160px;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 6px;
-  box-shadow: var(--vp-shadow-3);
-  z-index: 100;
-}
-
-.bar-item {
-  display: block;
-  padding: 6px 10px;
-  border-radius: 4px;
-  color: var(--vp-c-text-1);
-  font-size: 13px;
-  font-weight: 400;
-  text-decoration: none;
-  transition: background-color 0.2s, color 0.2s;
-  white-space: nowrap;
-}
-
-.bar-item:hover {
-  background: var(--vp-c-default-soft);
-  color: var(--vp-c-brand-1);
-}
-
-/* ── Mobile screen variant ── */
-.screen {
-  border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 0 0;
-  margin-top: 12px;
-}
-
-.screen-link {
-  display: block;
-  padding: 8px 12px;
-  color: var(--vp-c-text-1);
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  border-radius: 6px;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.screen-link:hover {
-  background: var(--vp-c-default-soft);
-  color: var(--vp-c-brand-1);
-}
-
-.screen-group {
-  margin-bottom: 8px;
-}
-
-.screen-group-title {
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.screen-item {
-  display: block;
-  padding: 6px 12px 6px 20px;
-  color: var(--vp-c-text-1);
-  font-size: 14px;
-  font-weight: 400;
-  text-decoration: none;
-  border-radius: 6px;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.screen-item:hover {
-  background: var(--vp-c-default-soft);
-  color: var(--vp-c-brand-1);
-}
-</style>
-
-<style>
-/*
- * Reposition the dynamic nav within VitePress's content-body flex container.
- * DOM order: [nav-bar-content-before(0)] [search(1, flex-grow:1)] [menu(2)]
- * [translations(3)] [appearance(4)] [social-links(5)] [extra(6)].
- * order:2 moves .VPDynamicNav.bar after search and any residual .menu,
- * placing it right before the language selector.
- */
-.VPNavBar .content-body .VPDynamicNav.bar { order: 2; }
-.VPNavBar .content-body .translations     { order: 3; }
-.VPNavBar .content-body .appearance       { order: 4; }
-.VPNavBar .content-body .social-links     { order: 5; }
-.VPNavBar .content-body .extra            { order: 6; }
-
-/* Separator between dynamic nav and the language selector, matching
-   VitePress's .menu + .translations::before pattern. Uses general sibling
-   (~) because flex order differs from DOM order. */
-.VPNavBar .content-body .VPDynamicNav.bar ~ .translations::before {
-  margin-right: 8px;
-  margin-left: 8px;
-  width: 1px;
-  height: 24px;
-  background-color: var(--vp-c-divider);
-  content: "";
-}
-</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 3b90032959..169336981c 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -20,7 +20,7 @@ if (inBrowser) {
 // Support redirect plugin
 import Redirect from "./components/Redirect.vue";
 
-import DynamicNav from "./components/DynamicNav.vue";
+import { createDynamicNav } from "vp-dynamic-nav";
 
 // Tabs: https://github.com/Red-Asuka/vitepress-plugin-tabs
 import { Tab, Tabs } from "vue3-tabs-component";
@@ -28,14 +28,7 @@ import "@red-asuka/vitepress-plugin-tabs/dist/style.css";
 
 /** @type {import('vitepress').Theme} */
 export default {
-  extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      "nav-bar-content-before": () => h(DynamicNav),
-      "nav-screen-content-after": () => h(DynamicNav, { screen: true }),
-    });
-  },
+  extends: createDynamicNav(DefaultTheme),
   enhanceApp({ app, router, siteData }) {
     app.component("Redirect", Redirect); //Redirect plugin
     //Tabs: https://github.com/Red-Asuka/vitepress-plugin-tabs
diff --git a/docs/package.json b/docs/package.json
index 04372fad4a..a315afb7bd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,6 +23,7 @@
     "medium-zoom": "^1.1.0",
     "open-editor": "^5.0.0",
     "vitepress": "^1.6.3",
+    "vp-dynamic-nav": "^0.0.1",
     "vue3-tabs-component": "^1.3.7"
   },
   "devDependencies": {
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 6ddf996df4..44b9aef100 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1747,6 +1747,11 @@ vitepress@^1.6.3:
     vite "^5.4.14"
     vue "^3.5.13"
 
+vp-dynamic-nav@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/vp-dynamic-nav/-/vp-dynamic-nav-0.0.1.tgz#4e3f803343d3457a262b5498b06ed2c6172da247"
+  integrity sha512-7FnKerBRMsqfVLWKPrm7sFFhFIXEbMJY6X1HJ17CvrEacL1al1UXFfXcMB+Vi9o0xdHOMU0e7N6kQQXAfjyLRA==
+
 vue3-tabs-component@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/vue3-tabs-component/-/vue3-tabs-component-1.3.7.tgz#b6cc2d3909eeec0bd82b571029050731f6e4ce64"