diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index 37564b783a7b..4ebfdc8723c1 100644
--- a/docs/config/theme-configs.md
+++ b/docs/config/theme-configs.md
@@ -83,6 +83,7 @@ type NavItemWithLink = {
 interface NavItemWithChildren {
   text?: string
   items: NavItemWithLink[]
+  activeMatch?: string
 }
 ```
 
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index f4a3c98201bb..b585f1b4167b 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -72,6 +72,14 @@ function onBlur() {
   fill: var(--vp-c-text-2);
 }
 
+.VPFlyout.active .text {
+  color: var(--vp-c-brand);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-dark);
+}
+
 .VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;
diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 4141fb8ee1e4..0a6c9483fb20 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavBarMenuGroup.vue
@@ -1,12 +1,27 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
+import { isActive } from '../support/utils'
 import VPFlyout from './VPFlyout.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
+
+const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout :button="item.text" :items="item.items" />
+  <VPFlyout
+    :class="{
+      VPNavBarMenuGroup: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch,
+        !!item.activeMatch
+      )
+    }"
+    :button="item.text"
+    :items="item.items"
+  />
 </template>
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 945773672e6f..26c02dfda323 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -94,6 +94,12 @@ export namespace DefaultTheme {
   export interface NavItemWithChildren {
     text?: string
     items: (NavItemChildren | NavItemWithLink)[]
+
+    /**
+     * `activeMatch` is expected to be a regex string. We can't use actual
+     * RegExp object here because it isn't serializable
+     */
+    activeMatch?: string
   }
 
   // image -----------------------------------------------------------------------