diff --git a/src/client/theme-default/components/NavBar.ts b/src/client/theme-default/components/NavBar.ts
index 3e706e69..79dd8782 100644
--- a/src/client/theme-default/components/NavBar.ts
+++ b/src/client/theme-default/components/NavBar.ts
@@ -1,24 +1,14 @@
-import { computed } from 'vue'
 import { withBase } from '../utils'
-import { useSiteDataByRoute } from 'vitepress'
-import NavBarLink from './NavBarLink.vue'
-import NavDropdownLink from './NavDropdownLink.vue'
+import NavBarLinks from './NavBarLinks.vue'
 
 export default {
   components: {
-    NavBarLink,
-    NavDropdownLink
+    NavBarLinks
   },
 
   setup() {
     return {
-      withBase,
-      navData:
-        process.env.NODE_ENV === 'production'
-          ? // navbar items do not change in production
-            useSiteDataByRoute().value.themeConfig.nav
-          : // use computed in dev for hot reload
-            computed(() => useSiteDataByRoute().value.themeConfig.nav)
+      withBase
     }
   }
 }
diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
index 50f2cffc..99cd3f9a 100644
--- a/src/client/theme-default/components/NavBar.vue
+++ b/src/client/theme-default/components/NavBar.vue
@@ -12,12 +12,7 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <nav class="nav-links" v-if="navData">
-    <template v-for="item of navData">
-      <NavDropdownLink v-if='item.items' :item="item"/>
-      <NavBarLink v-else :item="item"/>
-    </template>
-  </nav>
+  <NavBarLinks />
 </template>
 
 <script src="./NavBar"></script>
@@ -34,18 +29,4 @@
   height: 1.3rem;
   vertical-align: bottom;
 }
-
-.nav-links {
-  display: flex;
-  align-items: center;
-  height: 35px;
-  list-style-type: none;
-  transform: translateY(1px);
-}
-
-@media screen and (max-width: 719px) {
-  .nav-links {
-    display: none;
-  }
-}
 </style>
diff --git a/src/client/theme-default/components/NavBarLinks.ts b/src/client/theme-default/components/NavBarLinks.ts
new file mode 100644
index 00000000..e41aa966
--- /dev/null
+++ b/src/client/theme-default/components/NavBarLinks.ts
@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import { useSiteDataByRoute } from 'vitepress'
+import NavBarLink from './NavBarLink.vue'
+import NavDropdownLink from './NavDropdownLink.vue'
+
+export default {
+  components: {
+    NavBarLink,
+    NavDropdownLink
+  },
+
+  setup() {
+    return {
+      navData:
+        process.env.NODE_ENV === 'production'
+          ? // navbar items do not change in production
+            useSiteDataByRoute().value.themeConfig.nav
+          : // use computed in dev for hot reload
+            computed(() => useSiteDataByRoute().value.themeConfig.nav)
+    }
+  }
+}
diff --git a/src/client/theme-default/components/NavBarLinks.vue b/src/client/theme-default/components/NavBarLinks.vue
new file mode 100644
index 00000000..7bd1f228
--- /dev/null
+++ b/src/client/theme-default/components/NavBarLinks.vue
@@ -0,0 +1,26 @@
+<template>
+  <nav class="nav-links" v-if="navData">
+    <template v-for="item of navData">
+      <NavDropdownLink v-if='item.items' :item="item"/>
+      <NavBarLink v-else :item="item"/>
+    </template>
+  </nav>
+</template>
+
+<script src="./NavBarLinks"></script>
+
+<style>
+.nav-links {
+  display: flex;
+  align-items: center;
+  height: 35px;
+  list-style-type: none;
+  transform: translateY(1px);
+}
+
+@media screen and (max-width: 719px) {
+  .nav-links {
+    display: none;
+  }
+}
+</style>