From 49c84f570a933a2b5a95411bfd419b7369ab02a7 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 12 Aug 2026 22:36:06 +0800
Subject: [PATCH] fix(theme): fix menu dropdown group dividers (#5365)

---
 src/client/theme-default/components/VPMenu.vue       |  4 ++--
 src/client/theme-default/components/VPMenuGroup.vue  | 12 +++++++-----
 src/client/theme-default/components/VPMenuLink.vue   |  4 ++--
 .../theme-default/components/VPNavBarExtra.vue       |  4 ++--
 .../components/VPNavBarTranslations.vue              |  4 ++--
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 99b9683d..02776639 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -11,7 +11,7 @@ defineProps<{
 <template>
   <div class="VPMenu">
     <ul v-if="items" class="items">
-      <li v-for="item in items" :key="JSON.stringify(item)">
+      <template v-for="item in items" :key="JSON.stringify(item)">
         <VPMenuLink v-if="'link' in item" :item />
         <component
           v-else-if="'component' in item"
@@ -19,7 +19,7 @@ defineProps<{
           v-bind="item.props"
         />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
-      </li>
+      </template>
     </ul>
 
     <slot />
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index e95ad5e9..5cd52688 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -9,13 +9,15 @@ defineProps<{
 </script>
 
 <template>
-  <div class="VPMenuGroup">
+  <li class="VPMenuGroup">
     <p v-if="text" class="title">{{ text }}</p>
 
-    <template v-for="item in items" :key="JSON.stringify(item)">
-      <VPMenuLink v-if="'link' in item" :item />
-    </template>
-  </div>
+    <ul>
+      <template v-for="item in items" :key="JSON.stringify(item)">
+        <VPMenuLink v-if="'link' in item" :item />
+      </template>
+    </ul>
+  </li>
 </template>
 
 <style scoped>
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index af64182c..01c23f26 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -31,7 +31,7 @@ defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
-  <div class="VPMenuLink">
+  <li class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
       :class="{ active: isActiveLink }"
@@ -42,7 +42,7 @@ defineOptions({ inheritAttrs: false })
     >
       <span v-html="item.text"></span>
     </VPLink>
-  </div>
+  </li>
 </template>
 
 <style scoped>
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index 6ba10c58..cba5333b 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -32,7 +32,7 @@ const hasExtraContent = computed(
     >
       <li class="trans-title">{{ currentLang.label }}</li>
 
-      <li v-for="locale in localeLinks" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink
           :item="locale"
           :external="false"
@@ -42,7 +42,7 @@ const hasExtraContent = computed(
           :dir="locale.dir"
           data-allow-mismatch="attribute"
         />
-      </li>
+      </template>
     </ul>
 
     <div
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index e71b8318..45704f52 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -20,7 +20,7 @@ const { localeLinks, currentLang } = useLangs({
     <ul class="items">
       <li class="title">{{ currentLang.label }}</li>
 
-      <li v-for="locale in localeLinks" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink
           :item="locale"
           :external="false"
@@ -30,7 +30,7 @@ const { localeLinks, currentLang } = useLangs({
           :dir="locale.dir"
           data-allow-mismatch="attribute"
         />
-      </li>
+      </template>
     </ul>
   </VPFlyout>
 </template>