diff --git a/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue b/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
index 9633f38b..a1377e51 100644
--- a/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
+++ b/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
@@ -1,21 +1,35 @@
 <script lang="ts" setup>
 import { usePageData } from '@vuepress/client'
-import type { NavItemWithChildren } from '../../../shared/index.js'
+import { computed } from 'vue'
+import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import Flyout from '../Flyout/index.vue'
 
-defineProps<{
+const props = defineProps<{
   item: NavItemWithChildren
 }>()
 
 const page = usePageData()
+
+const isChildActive = (navItem: NavItem) => {
+  if ('link' in navItem) {
+    return isActive(
+      page.value.path,
+      navItem.link,
+      !!props.item.activeMatch
+    )
+  } else {
+    return navItem.items.some(isChildActive)
+  }
+}
+const childrenActive = computed(() => isChildActive(props.item))
 </script>
 
 <template>
   <Flyout
     :class="{
       'navbar-menu-group': true,
-      'active': isActive(page.path, item.activeMatch, !!item.activeMatch),
+      'active': isActive(page.path, item.activeMatch, !!item.activeMatch) || childrenActive,
     }"
     :button="item.text"
     :items="item.items"