diff --git a/docs/pages/components.tsx b/docs/pages/components.tsx
index 7148b2c25fc722..7b3553ced638a9 100644
--- a/docs/pages/components.tsx
+++ b/docs/pages/components.tsx
@@ -15,11 +15,40 @@ import PageContext from 'docs/src/modules/components/PageContext';
import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import Link from 'docs/src/modules/components/Link';
+import { MuiPage } from 'docs/src/pages';
export default function Components() {
const { pages } = React.useContext(PageContext);
const t = useTranslate();
const componentPageData = pages.find(({ pathname }) => pathname === '/components');
+ function renderItem(aPage: MuiPage) {
+ return (
+
+
+ {pageToTitleI18n(aPage, t) || ''}
+
+
+
+ );
+ }
return (
- {(page.children || []).map((nestedPage) => (
-
-
- {pageToTitleI18n(nestedPage, t) || ''}
-
-
-
- ))}
+ {(page.children || []).map((nestedPage) => {
+ if (nestedPage.children) {
+ return (
+
+
+
+ {pageToTitleI18n(nestedPage, t) || ''}
+
+ {nestedPage.children.map(renderItem)}
+
+
+ );
+ }
+ return renderItem(nestedPage);
+ })}
))}