diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index 67c3ecf29bbd3f..779d77047412b4 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -1,7 +1,6 @@
 const pages = [
   {
     pathname: '/joy-ui/getting-started',
-    scopePathnames: ['/joy-ui/main-features'],
     icon: 'DescriptionIcon',
     children: [
       { pathname: '/joy-ui/getting-started/overview' },
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 67821005ecafaf..cbc6ed28604d4c 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -21,12 +21,6 @@ const pages: MuiPage[] = [
   },
   {
     pathname: '/material-ui/react-',
-    scopePathnames: [
-      '/material-ui/icons',
-      '/material-ui/material-icons',
-      '/material-ui/about-the-lab',
-      '/material-ui/transitions',
-    ],
     title: 'Components',
     icon: 'ToggleOnIcon',
     children: [
@@ -165,7 +159,7 @@ const pages: MuiPage[] = [
     icon: 'CreateIcon',
     children: [
       {
-        pathname: '/material-ui/customization',
+        pathname: '/material-ui/customization/theme',
         subheader: '/material-ui/customization/theme',
         children: [
           { pathname: '/material-ui/customization/theming' },
@@ -263,7 +257,7 @@ const pages: MuiPage[] = [
         title: 'Migrating to Grid v2',
       },
       {
-        pathname: '/material-ui/migration',
+        pathname: '/material-ui/migration/v5',
         subheader: 'Upgrade to v5',
         children: [
           {
@@ -289,7 +283,7 @@ const pages: MuiPage[] = [
         ],
       },
       {
-        pathname: '/material-ui/migration',
+        pathname: '/material-ui/migration/earlier',
         subheader: 'Earlier versions',
         children: [
           { pathname: '/material-ui/migration/migration-v3', title: 'Migration from v3 to v4' },
diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts
index a2936405ac5688..8f0a87315323ab 100644
--- a/docs/data/system/pages.ts
+++ b/docs/data/system/pages.ts
@@ -14,21 +14,6 @@ const pages = [
   },
   {
     pathname: '/style-utilities',
-    scopePathnames: [
-      '/system/properties',
-      '/system/borders',
-      '/system/display',
-      '/system/flexbox',
-      '/system/grid',
-      '/system/palette',
-      '/system/positions',
-      '/system/shadows',
-      '/system/sizing',
-      '/system/spacing',
-      '/system/screen-readers',
-      '/system/typography',
-      '/system/styled',
-    ],
     icon: 'BuildIcon',
     children: [
       { pathname: '/system/properties' },
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index a16b6291a22945..67c6f73c9454b4 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import NextHead from 'next/head';
 import PropTypes from 'prop-types';
-import pages from 'docs/src/pages';
+import generalPages from 'docs/src/pages';
 import basePages from 'docs/data/base/pages';
 import materialPages from 'docs/data/material/pages';
 import joyPages from 'docs/data/joy/pages';
@@ -142,18 +142,22 @@ function AppWrapper(props) {
     }
   }, []);
 
-  let productPages = pages;
-  if (product === 'base') {
-    productPages = basePages;
-  } else if (product === 'material-ui') {
-    productPages = materialPages;
-  } else if (product === 'joy-ui') {
-    productPages = joyPages;
-  } else if (product === 'system') {
-    productPages = systemPages;
-  }
+  const pageContextValue = React.useMemo(() => {
+    let pages = generalPages;
+    if (product === 'base') {
+      pages = basePages;
+    } else if (product === 'material-ui') {
+      pages = materialPages;
+    } else if (product === 'joy-ui') {
+      pages = joyPages;
+    } else if (product === 'system') {
+      pages = systemPages;
+    }
+
+    const { activePage, activePageParents } = findActivePage(pages, router.pathname);
 
-  const activePage = findActivePage(productPages, router.pathname);
+    return { activePage, activePageParents, pages };
+  }, [product, router.pathname]);
 
   let fonts = [];
   if (asPathWithoutLang.match(/onepirate/)) {
@@ -162,11 +166,6 @@ function AppWrapper(props) {
     ];
   }
 
-  const pageContextValue = React.useMemo(
-    () => ({ activePage, pages: productPages }),
-    [activePage, productPages],
-  );
-
   return (
     <React.Fragment>
       <NextHead>
diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts
index 6d8e5ca5268244..4724f8f1d32772 100644
--- a/docs/src/MuiPage.ts
+++ b/docs/src/MuiPage.ts
@@ -15,6 +15,7 @@ export interface MuiPage {
   /**
    * In case the children have pathnames out of pathname value, use this field to scope other pathnames.
    * Pathname can be partial, e.g. '/components/' will cover '/components/button/' and '/components/link/'.
+   * @deprecated Dead code, to remove.
    */
   scopePathnames?: string[];
   /**
@@ -24,9 +25,12 @@ export interface MuiPage {
    */
   inSideNav?: boolean;
   /**
-   * Props spread to the Link component
+   * Props spread to the Link component.
    */
   linkProps?: Record<string, unknown>;
+  /**
+   * Subheader to display before navigation links.
+   */
   subheader?: string;
   /**
    * Overrides the default page title.
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 9b5c301ac037f5..c95e1f495b1517 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -208,7 +208,7 @@ function renderNavItems(options) {
  * @param {import('docs/src/pages').MuiPage} context.page
  */
 function reduceChildRoutes(context) {
-  const { onClose, activePage, items, depth, t } = context;
+  const { onClose, activePageParents, items, depth, t } = context;
   let { page } = context;
   if (page.inSideNav === false) {
     return items;
@@ -217,10 +217,9 @@ function reduceChildRoutes(context) {
   const title = pageToTitleI18n(page, t);
 
   if (page.children && page.children.length >= 1) {
-    const topLevel = activePage
-      ? activePage.pathname.indexOf(`${page.pathname}`) === 0 ||
-        page.scopePathnames?.some((pathname) => activePage.pathname.includes(pathname))
-      : false;
+    const topLevel =
+      activePageParents.map((parentPage) => parentPage.pathname).indexOf(page.pathname) !== -1;
+
     let firstChild = page.children[0];
 
     if (firstChild.subheader && firstChild.children) {
@@ -247,7 +246,7 @@ function reduceChildRoutes(context) {
         {renderNavItems({
           onClose,
           pages: page.children,
-          activePage,
+          activePageParents,
           depth: subheader ? depth : depth + 1,
           t,
         })}
@@ -283,7 +282,7 @@ const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigato
 
 export default function AppNavDrawer(props) {
   const { className, disablePermanent, mobileOpen, onClose, onOpen } = props;
-  const { activePage, pages } = React.useContext(PageContext);
+  const { activePageParents, pages } = React.useContext(PageContext);
   const router = useRouter();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const userLanguage = useUserLanguage();
@@ -294,7 +293,7 @@ export default function AppNavDrawer(props) {
   const drawer = React.useMemo(() => {
     const { canonicalAs } = pathnameToLanguage(router.asPath);
 
-    const navItems = renderNavItems({ onClose, pages, activePage, depth: 0, t });
+    const navItems = renderNavItems({ onClose, pages, activePageParents, depth: 0, t });
 
     const renderVersionSelector = (versions, sx) => {
       if (!versions?.length) {
@@ -528,7 +527,7 @@ export default function AppNavDrawer(props) {
         {navItems}
       </React.Fragment>
     );
-  }, [activePage, pages, onClose, languagePrefix, t, anchorEl, setAnchorEl, router.asPath]);
+  }, [activePageParents, pages, onClose, languagePrefix, t, anchorEl, setAnchorEl, router.asPath]);
 
   return (
     <nav className={className} aria-label={t('mainNavigation')}>
diff --git a/docs/src/modules/utils/findActivePage.test.js b/docs/src/modules/utils/findActivePage.test.js
index 9bf8a6743227c0..858f08a9616951 100644
--- a/docs/src/modules/utils/findActivePage.test.js
+++ b/docs/src/modules/utils/findActivePage.test.js
@@ -10,7 +10,7 @@ describe('findActivePage', () => {
         children: [{ pathname: '/getting-started/installation' }],
       },
       {
-        pathname: '/components',
+        pathname: '/react-',
         icon: 'ToggleOnIcon',
         children: [
           {
@@ -35,8 +35,9 @@ describe('findActivePage', () => {
         ],
       },
     ];
+
     it('return first level page', () => {
-      expect(findActivePage(pages, '/getting-started')).to.deep.equal({
+      expect(findActivePage(pages, '/getting-started').activePage).to.deep.equal({
         pathname: '/getting-started',
         icon: 'DescriptionIcon',
         children: [{ pathname: '/getting-started/installation' }],
@@ -44,13 +45,13 @@ describe('findActivePage', () => {
     });
 
     it('return nested page', () => {
-      expect(findActivePage(pages, '/getting-started/installation')).to.deep.equal({
+      expect(findActivePage(pages, '/getting-started/installation').activePage).to.deep.equal({
         pathname: '/getting-started/installation',
       });
     });
 
     it('return deep nested page', () => {
-      expect(findActivePage(pages, '/components/radio-buttons')).to.deep.equal({
+      expect(findActivePage(pages, '/components/radio-buttons').activePage).to.deep.equal({
         pathname: '/components/radio-buttons',
         title: 'Radio button',
       });
@@ -60,7 +61,7 @@ describe('findActivePage', () => {
   describe('new structure', () => {
     const pages = [
       {
-        pathname: '/material-ui/components',
+        pathname: '/material-ui/react-',
         icon: 'ToggleOnIcon',
         children: [
           {
@@ -87,7 +88,7 @@ describe('findActivePage', () => {
     ];
 
     it('return deep nested page', () => {
-      expect(findActivePage(pages, '/material-ui/react-radio-buttons')).to.deep.equal({
+      expect(findActivePage(pages, '/material-ui/react-radio-buttons').activePage).to.deep.equal({
         pathname: '/material-ui/react-radio-buttons',
         title: 'Radio button',
       });
diff --git a/docs/src/modules/utils/findActivePage.ts b/docs/src/modules/utils/findActivePage.ts
index 9d9edd1ef54f3c..428f82494d247a 100644
--- a/docs/src/modules/utils/findActivePage.ts
+++ b/docs/src/modules/utils/findActivePage.ts
@@ -1,16 +1,37 @@
 import { MuiPage } from 'docs/src/pages';
 
-export default function findActivePage(currentPages: MuiPage[], pathname: string): MuiPage | null {
+export default function findActivePage(
+  currentPages: MuiPage[],
+  pathname: string,
+): { activePage: MuiPage | null; activePageParents: MuiPage[] } {
   const map: Record<string, MuiPage> = {};
+  const mapParent: Record<string, MuiPage> = {};
 
-  const traverse = (array: MuiPage[]) => {
-    array.forEach((item) => {
-      map[item.pathname] = item;
-      traverse(item.children || []);
+  const traverse = (parent: MuiPage) => {
+    (parent.children || []).forEach((child) => {
+      map[child.pathname] = child;
+      if (mapParent[child.pathname]) {
+        throw new Error(`Duplicated pathname ${child.pathname} in pages`);
+      }
+      mapParent[child.pathname] = parent;
+      traverse(child);
     });
   };
 
-  traverse(currentPages);
+  traverse({ pathname: '/', children: currentPages });
 
-  return map[pathname] || null;
+  const activePage = map[pathname] || null;
+
+  const activePageParents = [];
+  let traversePage = activePage;
+  while (traversePage && traversePage.pathname !== '/') {
+    const parent = mapParent[traversePage.pathname];
+    activePageParents.push(parent);
+    traversePage = parent;
+  }
+
+  return {
+    activePage,
+    activePageParents,
+  };
 }
diff --git a/docs/src/pages.ts b/docs/src/pages.ts
index 5206144d012fcf..6929cbf85626cc 100644
--- a/docs/src/pages.ts
+++ b/docs/src/pages.ts
@@ -22,7 +22,7 @@ const pages: readonly MuiPage[] = [
     icon: 'ToggleOnIcon',
     children: [
       {
-        pathname: '/components',
+        pathname: '/components/inputs',
         subheader: '/components/inputs',
         children: [
           { pathname: '/components/autocomplete' },
@@ -41,7 +41,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/data-display',
         subheader: '/components/data-display',
         children: [
           { pathname: '/components/avatars', title: 'Avatar' },
@@ -57,7 +57,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/feedback',
         subheader: '/components/feedback',
         children: [
           { pathname: '/components/alert' },
@@ -69,7 +69,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/surfaces',
         subheader: '/components/surfaces',
         children: [
           { pathname: '/components/accordion' },
@@ -79,7 +79,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/navigation',
         subheader: '/components/navigation',
         children: [
           { pathname: '/components/bottom-navigation' },
@@ -94,7 +94,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/layout',
         subheader: '/components/layout',
         children: [
           { pathname: '/components/box' },
@@ -106,7 +106,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/utils',
         subheader: '/components/utils',
         children: [
           { pathname: '/components/click-away-listener' },
@@ -122,7 +122,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/data-grid-root',
         subheader: '/components/data-grid',
         children: [
           {
@@ -151,7 +151,7 @@ const pages: readonly MuiPage[] = [
         ],
       },
       {
-        pathname: '/components',
+        pathname: '/components/lab',
         subheader: '/components/lab',
         children: [
           { pathname: '/components/about-the-lab', title: 'About the lab 🧪' },
@@ -169,7 +169,7 @@ const pages: readonly MuiPage[] = [
     children: [
       ...pagesApi,
       {
-        pathname: '/api-docs/data-grid',
+        pathname: '/api-docs/data-grid-root',
         title: 'Data Grid',
         children: [
           { pathname: '/api-docs/data-grid', title: 'API Reference' },
@@ -229,7 +229,7 @@ const pages: readonly MuiPage[] = [
     ],
   },
   {
-    pathname: '/customization',
+    pathname: '/customization-root',
     icon: 'CreateIcon',
     children: [
       {