From b28667b6b03d50c4be0d509ec5e7d780f29f8042 Mon Sep 17 00:00:00 2001
From: WizardsBowl <125746317+WizardsBowl@users.noreply.github.com>
Date: Fri, 6 Feb 2026 11:54:50 +0800
Subject: [PATCH] fix(theme): navbar menu group is incorrectly highlighted
 (#5113)

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../theme-default/components/VPMenuLink.vue   | 16 ++++++-----
 .../components/VPNavBarMenuGroup.vue          | 27 +++++++++++--------
 .../components/VPNavBarMenuLink.vue           | 17 ++++++------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 2cf69099..028d3e82 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -18,6 +18,14 @@ const href = computed(() =>
     : props.item.link
 )
 
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
+
 defineOptions({ inheritAttrs: false })
 </script>
 
@@ -25,13 +33,7 @@ defineOptions({ inheritAttrs: false })
   <div class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
-      :class="{
-        active: isActive(
-          page.relativePath,
-          item.activeMatch || href,
-          !!item.activeMatch
-        )
-      }"
+      :class="{ active: isActiveLink }"
       :href
       :target="item.target"
       :rel="props.rel ?? item.rel"
diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 76cd42c5..85350d47 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavBarMenuGroup.vue
@@ -11,31 +11,36 @@ const props = defineProps<{
 
 const { page } = useData()
 
-const isChildActive = (navItem: DefaultTheme.NavItem) => {
+const isActiveGroup = computed(() => {
+  if (props.item.activeMatch) {
+    return isActive(page.value.relativePath, props.item.activeMatch, true)
+  }
+  return isChildActive(props.item)
+})
+
+function isChildActive(navItem: DefaultTheme.NavItem): boolean {
   if ('component' in navItem) return false
 
   if ('link' in navItem) {
+    const href =
+      typeof navItem.link === 'function'
+        ? navItem.link(page.value)
+        : navItem.link
+
     return isActive(
       page.value.relativePath,
-      typeof navItem.link === "function" ? navItem.link(page.value) : navItem.link,
-      !!props.item.activeMatch
+      navItem.activeMatch || href,
+      !!navItem.activeMatch
     )
   }
 
   return navItem.items.some(isChildActive)
 }
-
-const childrenActive = computed(() => isChildActive(props.item))
 </script>
 
 <template>
   <VPFlyout
-    :class="{
-      VPNavBarMenuGroup: true,
-      active:
-        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
-        childrenActive
-    }"
+    :class="{ VPNavBarMenuGroup: true, active: isActiveGroup }"
     :button="item.text"
     :items="item.items"
   />
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index e9869e1f..bb51a364 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -16,18 +16,19 @@ const href = computed(() =>
     ? props.item.link(page.value)
     : props.item.link
 )
+
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
 </script>
 
 <template>
   <VPLink
-    :class="{
-      VPNavBarMenuLink: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch || href,
-        !!item.activeMatch
-      )
-    }"
+    :class="{ VPNavBarMenuLink: true, active: isActiveLink }"
     :href
     :target="item.target"
     :rel="item.rel"