diff --git a/src/lib/client/ui/navigation/pageNav/groupHeader.svelte b/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
index 6f1ea8e..a70518b 100644
--- a/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
+++ b/src/lib/client/ui/navigation/pageNav/groupHeader.svelte
@@ -11,7 +11,7 @@
 
 	let { label, href, isOpen, hasItems, onToggle }: Props = $props();
 
-	const isActive = $derived($page.url.pathname === href);
+	const isActive = $derived($page.url.pathname === href || $page.url.pathname.startsWith(href + '/'));
 </script>
 
 <div class="group/header flex items-center">
diff --git a/src/lib/client/ui/navigation/pageNav/groupItem.svelte b/src/lib/client/ui/navigation/pageNav/groupItem.svelte
index 989a5b7..38f223a 100644
--- a/src/lib/client/ui/navigation/pageNav/groupItem.svelte
+++ b/src/lib/client/ui/navigation/pageNav/groupItem.svelte
@@ -8,7 +8,7 @@
 
 	let { label, href }: Props = $props();
 
-	const isActive = $derived($page.url.pathname === href);
+	const isActive = $derived($page.url.pathname === href || $page.url.pathname.startsWith(href + '/'));
 </script>
 
 <a