diff --git a/docs/pages/api-docs/accordion-actions.js b/docs/pages/api-docs/accordion-actions.js
index 90c17442a2c2ae..09c62375778684 100644
--- a/docs/pages/api-docs/accordion-actions.js
+++ b/docs/pages/api-docs/accordion-actions.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/accordion-actions';
 const requireRaw = require.context('!raw-loader!./', false, /\/accordion-actions\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/accordion-details.js b/docs/pages/api-docs/accordion-details.js
index 8677fef6f37f02..272d01847a06bf 100644
--- a/docs/pages/api-docs/accordion-details.js
+++ b/docs/pages/api-docs/accordion-details.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/accordion-details';
 const requireRaw = require.context('!raw-loader!./', false, /\/accordion-details\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/accordion-summary.js b/docs/pages/api-docs/accordion-summary.js
index ab14333f59327e..2969a44ad3cd2c 100644
--- a/docs/pages/api-docs/accordion-summary.js
+++ b/docs/pages/api-docs/accordion-summary.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/accordion-summary';
 const requireRaw = require.context('!raw-loader!./', false, /\/accordion-summary\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/accordion.js b/docs/pages/api-docs/accordion.js
index 90ecdc5be3ab1e..fc31179c8d6f95 100644
--- a/docs/pages/api-docs/accordion.js
+++ b/docs/pages/api-docs/accordion.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/accordion';
 const requireRaw = require.context('!raw-loader!./', false, /\/accordion\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/alert-title.js b/docs/pages/api-docs/alert-title.js
index 725678e7b7112a..eb4c87cbcbe867 100644
--- a/docs/pages/api-docs/alert-title.js
+++ b/docs/pages/api-docs/alert-title.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/alert-title';
 const requireRaw = require.context('!raw-loader!./', false, /\/alert-title\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/alert.js b/docs/pages/api-docs/alert.js
index d6b70720d6e3e4..831bc95281317b 100644
--- a/docs/pages/api-docs/alert.js
+++ b/docs/pages/api-docs/alert.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/alert';
 const requireRaw = require.context('!raw-loader!./', false, /\/alert\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/app-bar.js b/docs/pages/api-docs/app-bar.js
index c14477d7e57f5e..281e093e2b4658 100644
--- a/docs/pages/api-docs/app-bar.js
+++ b/docs/pages/api-docs/app-bar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/app-bar';
 const requireRaw = require.context('!raw-loader!./', false, /\/app-bar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/autocomplete.js b/docs/pages/api-docs/autocomplete.js
index dbcfb7d2ca3621..b7089daaa09011 100644
--- a/docs/pages/api-docs/autocomplete.js
+++ b/docs/pages/api-docs/autocomplete.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/autocomplete';
 const requireRaw = require.context('!raw-loader!./', false, /\/autocomplete\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/avatar-group.js b/docs/pages/api-docs/avatar-group.js
index 1641e49047137f..a28fbd8b98c74a 100644
--- a/docs/pages/api-docs/avatar-group.js
+++ b/docs/pages/api-docs/avatar-group.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/avatar-group';
 const requireRaw = require.context('!raw-loader!./', false, /\/avatar-group\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/avatar.js b/docs/pages/api-docs/avatar.js
index a2cb2cb580fdb5..5045cddb23e200 100644
--- a/docs/pages/api-docs/avatar.js
+++ b/docs/pages/api-docs/avatar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/avatar';
 const requireRaw = require.context('!raw-loader!./', false, /\/avatar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/backdrop.js b/docs/pages/api-docs/backdrop.js
index 83b7de4db23d61..a256bac9a3ceef 100644
--- a/docs/pages/api-docs/backdrop.js
+++ b/docs/pages/api-docs/backdrop.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/backdrop';
 const requireRaw = require.context('!raw-loader!./', false, /\/backdrop\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/badge.js b/docs/pages/api-docs/badge.js
index 43302b4cc93f2b..6d7ea0c847103b 100644
--- a/docs/pages/api-docs/badge.js
+++ b/docs/pages/api-docs/badge.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/badge';
 const requireRaw = require.context('!raw-loader!./', false, /\/badge\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/bottom-navigation-action.js b/docs/pages/api-docs/bottom-navigation-action.js
index 91d6b984d8202f..a67ce094915f32 100644
--- a/docs/pages/api-docs/bottom-navigation-action.js
+++ b/docs/pages/api-docs/bottom-navigation-action.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/bottom-navigation-action';
 const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation-action\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/bottom-navigation.js b/docs/pages/api-docs/bottom-navigation.js
index cb343e6cc8b968..32f451ffff0ade 100644
--- a/docs/pages/api-docs/bottom-navigation.js
+++ b/docs/pages/api-docs/bottom-navigation.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/bottom-navigation';
 const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/breadcrumbs.js b/docs/pages/api-docs/breadcrumbs.js
index ee13354b763f06..5d1d3b52cd46a6 100644
--- a/docs/pages/api-docs/breadcrumbs.js
+++ b/docs/pages/api-docs/breadcrumbs.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/breadcrumbs';
 const requireRaw = require.context('!raw-loader!./', false, /\/breadcrumbs\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/button-base.js b/docs/pages/api-docs/button-base.js
index e1931b61cd7cb6..57294bd2cd2448 100644
--- a/docs/pages/api-docs/button-base.js
+++ b/docs/pages/api-docs/button-base.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button-base';
 const requireRaw = require.context('!raw-loader!./', false, /\/button-base\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/button-group.js b/docs/pages/api-docs/button-group.js
index c45a61ff829c35..8e7dbf20d4e637 100644
--- a/docs/pages/api-docs/button-group.js
+++ b/docs/pages/api-docs/button-group.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button-group';
 const requireRaw = require.context('!raw-loader!./', false, /\/button-group\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/button.js b/docs/pages/api-docs/button.js
index 31ea06b24525d8..6485d29ba8d909 100644
--- a/docs/pages/api-docs/button.js
+++ b/docs/pages/api-docs/button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/button';
 const requireRaw = require.context('!raw-loader!./', false, /\/button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card-action-area.js b/docs/pages/api-docs/card-action-area.js
index ce00afb26b9c6e..209a657ef2e72c 100644
--- a/docs/pages/api-docs/card-action-area.js
+++ b/docs/pages/api-docs/card-action-area.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-action-area';
 const requireRaw = require.context('!raw-loader!./', false, /\/card-action-area\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card-actions.js b/docs/pages/api-docs/card-actions.js
index 1158a5986fc25b..ff63c52f805189 100644
--- a/docs/pages/api-docs/card-actions.js
+++ b/docs/pages/api-docs/card-actions.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-actions';
 const requireRaw = require.context('!raw-loader!./', false, /\/card-actions\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card-content.js b/docs/pages/api-docs/card-content.js
index 4ada07e2eb72a6..828ae280ab7608 100644
--- a/docs/pages/api-docs/card-content.js
+++ b/docs/pages/api-docs/card-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/card-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card-header.js b/docs/pages/api-docs/card-header.js
index b65e81e5bf21fa..1e70f633b78f73 100644
--- a/docs/pages/api-docs/card-header.js
+++ b/docs/pages/api-docs/card-header.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-header';
 const requireRaw = require.context('!raw-loader!./', false, /\/card-header\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card-media.js b/docs/pages/api-docs/card-media.js
index 8e7ecd8527778e..d9e053d93fec2a 100644
--- a/docs/pages/api-docs/card-media.js
+++ b/docs/pages/api-docs/card-media.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card-media';
 const requireRaw = require.context('!raw-loader!./', false, /\/card-media\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/card.js b/docs/pages/api-docs/card.js
index b2b7fceadd03bf..02305e07e4ae38 100644
--- a/docs/pages/api-docs/card.js
+++ b/docs/pages/api-docs/card.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/card';
 const requireRaw = require.context('!raw-loader!./', false, /\/card\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/checkbox.js b/docs/pages/api-docs/checkbox.js
index e6c751fb961224..a3bfe11f5d9897 100644
--- a/docs/pages/api-docs/checkbox.js
+++ b/docs/pages/api-docs/checkbox.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/checkbox';
 const requireRaw = require.context('!raw-loader!./', false, /\/checkbox\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/chip.js b/docs/pages/api-docs/chip.js
index b2e5b41ab626f1..f6864d39ef3c63 100644
--- a/docs/pages/api-docs/chip.js
+++ b/docs/pages/api-docs/chip.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/chip';
 const requireRaw = require.context('!raw-loader!./', false, /\/chip\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/circular-progress.js b/docs/pages/api-docs/circular-progress.js
index 154208c945f323..bd7fe1cbd144ee 100644
--- a/docs/pages/api-docs/circular-progress.js
+++ b/docs/pages/api-docs/circular-progress.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/circular-progress';
 const requireRaw = require.context('!raw-loader!./', false, /\/circular-progress\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/click-away-listener.js b/docs/pages/api-docs/click-away-listener.js
index 43b7a90994cce9..051fb91bd1bae6 100644
--- a/docs/pages/api-docs/click-away-listener.js
+++ b/docs/pages/api-docs/click-away-listener.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/click-away-listener';
 const requireRaw = require.context('!raw-loader!./', false, /\/click-away-listener\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/collapse.js b/docs/pages/api-docs/collapse.js
index 4f99e7ff06e9a3..bea923fcf993db 100644
--- a/docs/pages/api-docs/collapse.js
+++ b/docs/pages/api-docs/collapse.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/collapse';
 const requireRaw = require.context('!raw-loader!./', false, /\/collapse\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/container.js b/docs/pages/api-docs/container.js
index 367330ec6a89d5..f6826b94007c57 100644
--- a/docs/pages/api-docs/container.js
+++ b/docs/pages/api-docs/container.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/container';
 const requireRaw = require.context('!raw-loader!./', false, /\/container\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/css-baseline.js b/docs/pages/api-docs/css-baseline.js
index 6ef62b32af7582..c24e1675d0e4e6 100644
--- a/docs/pages/api-docs/css-baseline.js
+++ b/docs/pages/api-docs/css-baseline.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/css-baseline';
 const requireRaw = require.context('!raw-loader!./', false, /\/css-baseline\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/dialog-actions.js b/docs/pages/api-docs/dialog-actions.js
index 47db03616798a0..1a38dd3295c97e 100644
--- a/docs/pages/api-docs/dialog-actions.js
+++ b/docs/pages/api-docs/dialog-actions.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-actions';
 const requireRaw = require.context('!raw-loader!./', false, /\/dialog-actions\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/dialog-content-text.js b/docs/pages/api-docs/dialog-content-text.js
index 655db26bff595b..024a68f9ae7c79 100644
--- a/docs/pages/api-docs/dialog-content-text.js
+++ b/docs/pages/api-docs/dialog-content-text.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-content-text';
 const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content-text\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/dialog-content.js b/docs/pages/api-docs/dialog-content.js
index 97d8f80d7212d1..202f822808195e 100644
--- a/docs/pages/api-docs/dialog-content.js
+++ b/docs/pages/api-docs/dialog-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/dialog-title.js b/docs/pages/api-docs/dialog-title.js
index 59ce357a872567..96bfeabccee3e4 100644
--- a/docs/pages/api-docs/dialog-title.js
+++ b/docs/pages/api-docs/dialog-title.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog-title';
 const requireRaw = require.context('!raw-loader!./', false, /\/dialog-title\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/dialog.js b/docs/pages/api-docs/dialog.js
index b703a05e7648e8..483e4bf1a291a2 100644
--- a/docs/pages/api-docs/dialog.js
+++ b/docs/pages/api-docs/dialog.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/dialog';
 const requireRaw = require.context('!raw-loader!./', false, /\/dialog\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/divider.js b/docs/pages/api-docs/divider.js
index 0ea897a9459515..363f9386ef41c7 100644
--- a/docs/pages/api-docs/divider.js
+++ b/docs/pages/api-docs/divider.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/divider';
 const requireRaw = require.context('!raw-loader!./', false, /\/divider\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/drawer.js b/docs/pages/api-docs/drawer.js
index d8b18cb8592ca1..265e0ea6cf2d70 100644
--- a/docs/pages/api-docs/drawer.js
+++ b/docs/pages/api-docs/drawer.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/drawer';
 const requireRaw = require.context('!raw-loader!./', false, /\/drawer\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/fab.js b/docs/pages/api-docs/fab.js
index 62eb0408f0ada5..1d6c07919c2d9c 100644
--- a/docs/pages/api-docs/fab.js
+++ b/docs/pages/api-docs/fab.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/fab';
 const requireRaw = require.context('!raw-loader!./', false, /\/fab\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/fade.js b/docs/pages/api-docs/fade.js
index e0f7e5209ca607..7617c7f0bf64a2 100644
--- a/docs/pages/api-docs/fade.js
+++ b/docs/pages/api-docs/fade.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/fade';
 const requireRaw = require.context('!raw-loader!./', false, /\/fade\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/filled-input.js b/docs/pages/api-docs/filled-input.js
index 53ae0920bddaaa..a2aa3d42afcedc 100644
--- a/docs/pages/api-docs/filled-input.js
+++ b/docs/pages/api-docs/filled-input.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/filled-input';
 const requireRaw = require.context('!raw-loader!./', false, /\/filled-input\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/form-control-label.js b/docs/pages/api-docs/form-control-label.js
index 5c16a507df141f..3d85f9c937587f 100644
--- a/docs/pages/api-docs/form-control-label.js
+++ b/docs/pages/api-docs/form-control-label.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-control-label';
 const requireRaw = require.context('!raw-loader!./', false, /\/form-control-label\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/form-control.js b/docs/pages/api-docs/form-control.js
index 433f6a922ef529..2bad2327d597f9 100644
--- a/docs/pages/api-docs/form-control.js
+++ b/docs/pages/api-docs/form-control.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-control';
 const requireRaw = require.context('!raw-loader!./', false, /\/form-control\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/form-group.js b/docs/pages/api-docs/form-group.js
index f1fedc62ae2244..41ec1cf41d8de4 100644
--- a/docs/pages/api-docs/form-group.js
+++ b/docs/pages/api-docs/form-group.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-group';
 const requireRaw = require.context('!raw-loader!./', false, /\/form-group\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/form-helper-text.js b/docs/pages/api-docs/form-helper-text.js
index ddf08e0d7cdc2f..d606257e211671 100644
--- a/docs/pages/api-docs/form-helper-text.js
+++ b/docs/pages/api-docs/form-helper-text.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-helper-text';
 const requireRaw = require.context('!raw-loader!./', false, /\/form-helper-text\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/form-label.js b/docs/pages/api-docs/form-label.js
index 978231ae2e0a87..845af78d502d1d 100644
--- a/docs/pages/api-docs/form-label.js
+++ b/docs/pages/api-docs/form-label.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/form-label';
 const requireRaw = require.context('!raw-loader!./', false, /\/form-label\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/grid.js b/docs/pages/api-docs/grid.js
index 35fcee3aa8e2f6..703ed9e740201c 100644
--- a/docs/pages/api-docs/grid.js
+++ b/docs/pages/api-docs/grid.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grid';
 const requireRaw = require.context('!raw-loader!./', false, /\/grid\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/grow.js b/docs/pages/api-docs/grow.js
index ee20906eecd902..2c214d1bf822bc 100644
--- a/docs/pages/api-docs/grow.js
+++ b/docs/pages/api-docs/grow.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/grow';
 const requireRaw = require.context('!raw-loader!./', false, /\/grow\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/hidden.js b/docs/pages/api-docs/hidden.js
index 6d67ca39ce34d8..c9a50b0e733025 100644
--- a/docs/pages/api-docs/hidden.js
+++ b/docs/pages/api-docs/hidden.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/hidden';
 const requireRaw = require.context('!raw-loader!./', false, /\/hidden\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/icon-button.js b/docs/pages/api-docs/icon-button.js
index 76fadb870d463a..30fde9e694b422 100644
--- a/docs/pages/api-docs/icon-button.js
+++ b/docs/pages/api-docs/icon-button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/icon-button';
 const requireRaw = require.context('!raw-loader!./', false, /\/icon-button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/icon.js b/docs/pages/api-docs/icon.js
index f841734a598597..508021e46ff242 100644
--- a/docs/pages/api-docs/icon.js
+++ b/docs/pages/api-docs/icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/icon';
 const requireRaw = require.context('!raw-loader!./', false, /\/icon\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/image-list-item-bar.js b/docs/pages/api-docs/image-list-item-bar.js
index edb472fed02622..9385aec3144104 100644
--- a/docs/pages/api-docs/image-list-item-bar.js
+++ b/docs/pages/api-docs/image-list-item-bar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/image-list-item-bar';
 const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item-bar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/image-list-item.js b/docs/pages/api-docs/image-list-item.js
index b6bf73a4e99c11..81197d1d0aa67a 100644
--- a/docs/pages/api-docs/image-list-item.js
+++ b/docs/pages/api-docs/image-list-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/image-list-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/image-list.js b/docs/pages/api-docs/image-list.js
index 0c2fa21ec58007..04607af7ab2db0 100644
--- a/docs/pages/api-docs/image-list.js
+++ b/docs/pages/api-docs/image-list.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/image-list';
 const requireRaw = require.context('!raw-loader!./', false, /\/image-list\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/input-adornment.js b/docs/pages/api-docs/input-adornment.js
index 7ccdb6919f17ae..f0d6f379836711 100644
--- a/docs/pages/api-docs/input-adornment.js
+++ b/docs/pages/api-docs/input-adornment.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-adornment';
 const requireRaw = require.context('!raw-loader!./', false, /\/input-adornment\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/input-base.js b/docs/pages/api-docs/input-base.js
index dcdbf8782ecc65..63d066de3cad53 100644
--- a/docs/pages/api-docs/input-base.js
+++ b/docs/pages/api-docs/input-base.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-base';
 const requireRaw = require.context('!raw-loader!./', false, /\/input-base\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/input-label.js b/docs/pages/api-docs/input-label.js
index ba443c21721ecb..d1319965631db5 100644
--- a/docs/pages/api-docs/input-label.js
+++ b/docs/pages/api-docs/input-label.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input-label';
 const requireRaw = require.context('!raw-loader!./', false, /\/input-label\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/input.js b/docs/pages/api-docs/input.js
index fce3ce586ec13a..917d7e0f283de2 100644
--- a/docs/pages/api-docs/input.js
+++ b/docs/pages/api-docs/input.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/input';
 const requireRaw = require.context('!raw-loader!./', false, /\/input\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/linear-progress.js b/docs/pages/api-docs/linear-progress.js
index 9431f1d17fee69..7cdda63a70d044 100644
--- a/docs/pages/api-docs/linear-progress.js
+++ b/docs/pages/api-docs/linear-progress.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/linear-progress';
 const requireRaw = require.context('!raw-loader!./', false, /\/linear-progress\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/link.js b/docs/pages/api-docs/link.js
index 13b59ffed461be..1c86fa83a7edb2 100644
--- a/docs/pages/api-docs/link.js
+++ b/docs/pages/api-docs/link.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/link';
 const requireRaw = require.context('!raw-loader!./', false, /\/link\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-item-avatar.js b/docs/pages/api-docs/list-item-avatar.js
index 81c5cce35668ed..9b45296ff7cd0d 100644
--- a/docs/pages/api-docs/list-item-avatar.js
+++ b/docs/pages/api-docs/list-item-avatar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-avatar';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-item-avatar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-item-icon.js b/docs/pages/api-docs/list-item-icon.js
index 5f0e569e1e782d..ef2858da53c8a7 100644
--- a/docs/pages/api-docs/list-item-icon.js
+++ b/docs/pages/api-docs/list-item-icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-icon';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-item-icon\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-item-secondary-action.js b/docs/pages/api-docs/list-item-secondary-action.js
index 1d5c4ecfa4e807..47f6fef3d50944 100644
--- a/docs/pages/api-docs/list-item-secondary-action.js
+++ b/docs/pages/api-docs/list-item-secondary-action.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-secondary-action';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-item-secondary-action\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-item-text.js b/docs/pages/api-docs/list-item-text.js
index f602f595daeb15..0d699edda03cb9 100644
--- a/docs/pages/api-docs/list-item-text.js
+++ b/docs/pages/api-docs/list-item-text.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item-text';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-item-text\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-item.js b/docs/pages/api-docs/list-item.js
index 5902fe162c264d..521c40ffdd3323 100644
--- a/docs/pages/api-docs/list-item.js
+++ b/docs/pages/api-docs/list-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list-subheader.js b/docs/pages/api-docs/list-subheader.js
index a3ad288f5fd2fc..1922630568ffa7 100644
--- a/docs/pages/api-docs/list-subheader.js
+++ b/docs/pages/api-docs/list-subheader.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list-subheader';
 const requireRaw = require.context('!raw-loader!./', false, /\/list-subheader\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/list.js b/docs/pages/api-docs/list.js
index b8c77ceb8763a6..7cdf438f19a052 100644
--- a/docs/pages/api-docs/list.js
+++ b/docs/pages/api-docs/list.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/list';
 const requireRaw = require.context('!raw-loader!./', false, /\/list\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/loading-button.js b/docs/pages/api-docs/loading-button.js
index ee46e68fbf7e46..0c54ae2ab65b7c 100644
--- a/docs/pages/api-docs/loading-button.js
+++ b/docs/pages/api-docs/loading-button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/loading-button';
 const requireRaw = require.context('!raw-loader!./', false, /\/loading-button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/menu-item.js b/docs/pages/api-docs/menu-item.js
index aa6e1c04a8bec1..c81b187c0d6ed1 100644
--- a/docs/pages/api-docs/menu-item.js
+++ b/docs/pages/api-docs/menu-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/menu-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/menu-list.js b/docs/pages/api-docs/menu-list.js
index ca466d281402a4..e3c123e632f22c 100644
--- a/docs/pages/api-docs/menu-list.js
+++ b/docs/pages/api-docs/menu-list.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu-list';
 const requireRaw = require.context('!raw-loader!./', false, /\/menu-list\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/menu.js b/docs/pages/api-docs/menu.js
index efd84df3e8b935..5923e2ce9a8b9c 100644
--- a/docs/pages/api-docs/menu.js
+++ b/docs/pages/api-docs/menu.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/menu';
 const requireRaw = require.context('!raw-loader!./', false, /\/menu\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/mobile-stepper.js b/docs/pages/api-docs/mobile-stepper.js
index 472b74d346251a..5bf308e202b995 100644
--- a/docs/pages/api-docs/mobile-stepper.js
+++ b/docs/pages/api-docs/mobile-stepper.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/mobile-stepper';
 const requireRaw = require.context('!raw-loader!./', false, /\/mobile-stepper\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/modal.js b/docs/pages/api-docs/modal.js
index 979f2bef945047..0f5e3acfe952fc 100644
--- a/docs/pages/api-docs/modal.js
+++ b/docs/pages/api-docs/modal.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/modal';
 const requireRaw = require.context('!raw-loader!./', false, /\/modal\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/native-select.js b/docs/pages/api-docs/native-select.js
index 22108ce15f4468..b1144d16f0567f 100644
--- a/docs/pages/api-docs/native-select.js
+++ b/docs/pages/api-docs/native-select.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/native-select';
 const requireRaw = require.context('!raw-loader!./', false, /\/native-select\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/no-ssr.js b/docs/pages/api-docs/no-ssr.js
index 9d9c8a6631ec41..46f96fc60f6201 100644
--- a/docs/pages/api-docs/no-ssr.js
+++ b/docs/pages/api-docs/no-ssr.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/no-ssr';
 const requireRaw = require.context('!raw-loader!./', false, /\/no-ssr\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/outlined-input.js b/docs/pages/api-docs/outlined-input.js
index bce4b51e05a20b..14b891657a18ec 100644
--- a/docs/pages/api-docs/outlined-input.js
+++ b/docs/pages/api-docs/outlined-input.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/outlined-input';
 const requireRaw = require.context('!raw-loader!./', false, /\/outlined-input\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/pagination-item.js b/docs/pages/api-docs/pagination-item.js
index dbda4201e73ac9..bb9a4a784c8e09 100644
--- a/docs/pages/api-docs/pagination-item.js
+++ b/docs/pages/api-docs/pagination-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/pagination-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/pagination-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/pagination.js b/docs/pages/api-docs/pagination.js
index 0065f09da79782..6cd2ea6e8ff50c 100644
--- a/docs/pages/api-docs/pagination.js
+++ b/docs/pages/api-docs/pagination.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/pagination';
 const requireRaw = require.context('!raw-loader!./', false, /\/pagination\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/paper.js b/docs/pages/api-docs/paper.js
index cef76c5ef4af0d..aea72556625d54 100644
--- a/docs/pages/api-docs/paper.js
+++ b/docs/pages/api-docs/paper.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/paper';
 const requireRaw = require.context('!raw-loader!./', false, /\/paper\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/popover.js b/docs/pages/api-docs/popover.js
index 5ffb48ba112e42..28e03f090c85bb 100644
--- a/docs/pages/api-docs/popover.js
+++ b/docs/pages/api-docs/popover.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/popover';
 const requireRaw = require.context('!raw-loader!./', false, /\/popover\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/popper.js b/docs/pages/api-docs/popper.js
index 603d9b40a4ccc8..92de8f256eafb4 100644
--- a/docs/pages/api-docs/popper.js
+++ b/docs/pages/api-docs/popper.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/popper';
 const requireRaw = require.context('!raw-loader!./', false, /\/popper\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/portal.js b/docs/pages/api-docs/portal.js
index b3a6e34d4ae9b1..35535990ced9b0 100644
--- a/docs/pages/api-docs/portal.js
+++ b/docs/pages/api-docs/portal.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/portal';
 const requireRaw = require.context('!raw-loader!./', false, /\/portal\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/radio-group.js b/docs/pages/api-docs/radio-group.js
index 85c2819d62f4a3..8a8cabeb2dd64a 100644
--- a/docs/pages/api-docs/radio-group.js
+++ b/docs/pages/api-docs/radio-group.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/radio-group';
 const requireRaw = require.context('!raw-loader!./', false, /\/radio-group\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/radio.js b/docs/pages/api-docs/radio.js
index 66efafd2872ce8..1075558857281c 100644
--- a/docs/pages/api-docs/radio.js
+++ b/docs/pages/api-docs/radio.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/radio';
 const requireRaw = require.context('!raw-loader!./', false, /\/radio\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/rating.js b/docs/pages/api-docs/rating.js
index 8367051a8210aa..42cd65b3283192 100644
--- a/docs/pages/api-docs/rating.js
+++ b/docs/pages/api-docs/rating.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/rating';
 const requireRaw = require.context('!raw-loader!./', false, /\/rating\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/scoped-css-baseline.js b/docs/pages/api-docs/scoped-css-baseline.js
index 1ad829af78f08d..9af5964c8fe33a 100644
--- a/docs/pages/api-docs/scoped-css-baseline.js
+++ b/docs/pages/api-docs/scoped-css-baseline.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/scoped-css-baseline';
 const requireRaw = require.context('!raw-loader!./', false, /\/scoped-css-baseline\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/select.js b/docs/pages/api-docs/select.js
index 35a0808796cbae..09b28686f2413a 100644
--- a/docs/pages/api-docs/select.js
+++ b/docs/pages/api-docs/select.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/select';
 const requireRaw = require.context('!raw-loader!./', false, /\/select\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/skeleton.js b/docs/pages/api-docs/skeleton.js
index a96e3dbf710267..2c8d2f6ed2bace 100644
--- a/docs/pages/api-docs/skeleton.js
+++ b/docs/pages/api-docs/skeleton.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/skeleton';
 const requireRaw = require.context('!raw-loader!./', false, /\/skeleton\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/slide.js b/docs/pages/api-docs/slide.js
index f8f62c696efe2f..e906641e6b0e57 100644
--- a/docs/pages/api-docs/slide.js
+++ b/docs/pages/api-docs/slide.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/slide';
 const requireRaw = require.context('!raw-loader!./', false, /\/slide\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/slider-unstyled.js b/docs/pages/api-docs/slider-unstyled.js
index 6558f78ffa2a18..2f34d1d64ce108 100644
--- a/docs/pages/api-docs/slider-unstyled.js
+++ b/docs/pages/api-docs/slider-unstyled.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/slider-unstyled';
 const requireRaw = require.context('!raw-loader!./', false, /\/slider-unstyled\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/slider.js b/docs/pages/api-docs/slider.js
index 8d6bc821c14d8f..a25483fbbfb724 100644
--- a/docs/pages/api-docs/slider.js
+++ b/docs/pages/api-docs/slider.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/slider';
 const requireRaw = require.context('!raw-loader!./', false, /\/slider\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/snackbar-content.js b/docs/pages/api-docs/snackbar-content.js
index f0177dcac38db3..66dcf75254d46c 100644
--- a/docs/pages/api-docs/snackbar-content.js
+++ b/docs/pages/api-docs/snackbar-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/snackbar-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/snackbar-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/snackbar.js b/docs/pages/api-docs/snackbar.js
index 96f3054b6b7969..fefc4ffbfef4f1 100644
--- a/docs/pages/api-docs/snackbar.js
+++ b/docs/pages/api-docs/snackbar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/snackbar';
 const requireRaw = require.context('!raw-loader!./', false, /\/snackbar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/speed-dial-action.js b/docs/pages/api-docs/speed-dial-action.js
index 5004f1212cc3ed..bbb1b2f391da40 100644
--- a/docs/pages/api-docs/speed-dial-action.js
+++ b/docs/pages/api-docs/speed-dial-action.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial-action';
 const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial-action\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/speed-dial-icon.js b/docs/pages/api-docs/speed-dial-icon.js
index f958287858110f..e96f0a724eed8f 100644
--- a/docs/pages/api-docs/speed-dial-icon.js
+++ b/docs/pages/api-docs/speed-dial-icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial-icon';
 const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial-icon\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/speed-dial.js b/docs/pages/api-docs/speed-dial.js
index f783a62375d0ed..27b5ff5a9cb00f 100644
--- a/docs/pages/api-docs/speed-dial.js
+++ b/docs/pages/api-docs/speed-dial.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/speed-dial';
 const requireRaw = require.context('!raw-loader!./', false, /\/speed-dial\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step-button.js b/docs/pages/api-docs/step-button.js
index d442fa84d783d8..fb5e46b43ad178 100644
--- a/docs/pages/api-docs/step-button.js
+++ b/docs/pages/api-docs/step-button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-button';
 const requireRaw = require.context('!raw-loader!./', false, /\/step-button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step-connector.js b/docs/pages/api-docs/step-connector.js
index 777356eb91703d..ae8a2634c6262f 100644
--- a/docs/pages/api-docs/step-connector.js
+++ b/docs/pages/api-docs/step-connector.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-connector';
 const requireRaw = require.context('!raw-loader!./', false, /\/step-connector\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step-content.js b/docs/pages/api-docs/step-content.js
index e43ecb26258898..22e2cfa6e7bf93 100644
--- a/docs/pages/api-docs/step-content.js
+++ b/docs/pages/api-docs/step-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/step-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step-icon.js b/docs/pages/api-docs/step-icon.js
index 3f7db348227bbb..fe66d2b5fd1607 100644
--- a/docs/pages/api-docs/step-icon.js
+++ b/docs/pages/api-docs/step-icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-icon';
 const requireRaw = require.context('!raw-loader!./', false, /\/step-icon\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step-label.js b/docs/pages/api-docs/step-label.js
index 03c09ded01fa4c..ed5c7a1e6f5333 100644
--- a/docs/pages/api-docs/step-label.js
+++ b/docs/pages/api-docs/step-label.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step-label';
 const requireRaw = require.context('!raw-loader!./', false, /\/step-label\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/step.js b/docs/pages/api-docs/step.js
index 1c98d3a9f9de9a..acae92e0050460 100644
--- a/docs/pages/api-docs/step.js
+++ b/docs/pages/api-docs/step.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/step';
 const requireRaw = require.context('!raw-loader!./', false, /\/step\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/stepper.js b/docs/pages/api-docs/stepper.js
index ac2d442264969b..3fd0d0ee557d07 100644
--- a/docs/pages/api-docs/stepper.js
+++ b/docs/pages/api-docs/stepper.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/stepper';
 const requireRaw = require.context('!raw-loader!./', false, /\/stepper\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/svg-icon.js b/docs/pages/api-docs/svg-icon.js
index adbf249c0c4b79..b8acd15999f475 100644
--- a/docs/pages/api-docs/svg-icon.js
+++ b/docs/pages/api-docs/svg-icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/svg-icon';
 const requireRaw = require.context('!raw-loader!./', false, /\/svg-icon\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/swipeable-drawer.js b/docs/pages/api-docs/swipeable-drawer.js
index 87cae004a02e00..d123b6187fbb61 100644
--- a/docs/pages/api-docs/swipeable-drawer.js
+++ b/docs/pages/api-docs/swipeable-drawer.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/swipeable-drawer';
 const requireRaw = require.context('!raw-loader!./', false, /\/swipeable-drawer\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/switch.js b/docs/pages/api-docs/switch.js
index ff9ba1a1d9bd08..1fca5ffdc1da1d 100644
--- a/docs/pages/api-docs/switch.js
+++ b/docs/pages/api-docs/switch.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/switch';
 const requireRaw = require.context('!raw-loader!./', false, /\/switch\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tab-context.js b/docs/pages/api-docs/tab-context.js
index 3edc543d4263fc..b8bc69f6a93cb1 100644
--- a/docs/pages/api-docs/tab-context.js
+++ b/docs/pages/api-docs/tab-context.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab-context';
 const requireRaw = require.context('!raw-loader!./', false, /\/tab-context\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tab-list.js b/docs/pages/api-docs/tab-list.js
index 42db9eacc48378..ff39cfa6ea38bd 100644
--- a/docs/pages/api-docs/tab-list.js
+++ b/docs/pages/api-docs/tab-list.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab-list';
 const requireRaw = require.context('!raw-loader!./', false, /\/tab-list\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tab-panel.js b/docs/pages/api-docs/tab-panel.js
index 951b21c3272463..8310c1cbf3d1af 100644
--- a/docs/pages/api-docs/tab-panel.js
+++ b/docs/pages/api-docs/tab-panel.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab-panel';
 const requireRaw = require.context('!raw-loader!./', false, /\/tab-panel\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tab-scroll-button.js b/docs/pages/api-docs/tab-scroll-button.js
index b30251b7a4b12d..f98b14f38ca6ca 100644
--- a/docs/pages/api-docs/tab-scroll-button.js
+++ b/docs/pages/api-docs/tab-scroll-button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab-scroll-button';
 const requireRaw = require.context('!raw-loader!./', false, /\/tab-scroll-button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tab.js b/docs/pages/api-docs/tab.js
index 62c1a074371b8e..b9d3b6b9dfcacf 100644
--- a/docs/pages/api-docs/tab.js
+++ b/docs/pages/api-docs/tab.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tab';
 const requireRaw = require.context('!raw-loader!./', false, /\/tab\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-body.js b/docs/pages/api-docs/table-body.js
index be7856e32b1247..a74a07399d16d2 100644
--- a/docs/pages/api-docs/table-body.js
+++ b/docs/pages/api-docs/table-body.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-body';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-body\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-cell.js b/docs/pages/api-docs/table-cell.js
index b04cc4619d3ff0..4b97d3c2ce9b56 100644
--- a/docs/pages/api-docs/table-cell.js
+++ b/docs/pages/api-docs/table-cell.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-cell';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-cell\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-container.js b/docs/pages/api-docs/table-container.js
index d6919c1205fc4f..90f49aa73ab762 100644
--- a/docs/pages/api-docs/table-container.js
+++ b/docs/pages/api-docs/table-container.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-container';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-container\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-footer.js b/docs/pages/api-docs/table-footer.js
index b80d93d40a4304..a49e1951ded611 100644
--- a/docs/pages/api-docs/table-footer.js
+++ b/docs/pages/api-docs/table-footer.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-footer';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-footer\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-head.js b/docs/pages/api-docs/table-head.js
index ec1509af290c06..454e5c1c5b3628 100644
--- a/docs/pages/api-docs/table-head.js
+++ b/docs/pages/api-docs/table-head.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-head';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-head\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-pagination.js b/docs/pages/api-docs/table-pagination.js
index b815cc61b3922f..56372b202c148c 100644
--- a/docs/pages/api-docs/table-pagination.js
+++ b/docs/pages/api-docs/table-pagination.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-pagination';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-pagination\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-row.js b/docs/pages/api-docs/table-row.js
index 8a519da1c718f4..b6738d3b5b6c31 100644
--- a/docs/pages/api-docs/table-row.js
+++ b/docs/pages/api-docs/table-row.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-row';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-row\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table-sort-label.js b/docs/pages/api-docs/table-sort-label.js
index daa569b22c41d3..67ea9339ae19e2 100644
--- a/docs/pages/api-docs/table-sort-label.js
+++ b/docs/pages/api-docs/table-sort-label.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table-sort-label';
 const requireRaw = require.context('!raw-loader!./', false, /\/table-sort-label\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/table.js b/docs/pages/api-docs/table.js
index 7fb2bc06a6edb4..613e56135c0210 100644
--- a/docs/pages/api-docs/table.js
+++ b/docs/pages/api-docs/table.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/table';
 const requireRaw = require.context('!raw-loader!./', false, /\/table\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tabs.js b/docs/pages/api-docs/tabs.js
index c5262494b10beb..fd872bcd6b5044 100644
--- a/docs/pages/api-docs/tabs.js
+++ b/docs/pages/api-docs/tabs.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tabs';
 const requireRaw = require.context('!raw-loader!./', false, /\/tabs\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/text-field.js b/docs/pages/api-docs/text-field.js
index e072946741e510..fde1d60e84b063 100644
--- a/docs/pages/api-docs/text-field.js
+++ b/docs/pages/api-docs/text-field.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/text-field';
 const requireRaw = require.context('!raw-loader!./', false, /\/text-field\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/textarea-autosize.js b/docs/pages/api-docs/textarea-autosize.js
index ce2bd7ec6948fb..ae8908f542860b 100644
--- a/docs/pages/api-docs/textarea-autosize.js
+++ b/docs/pages/api-docs/textarea-autosize.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/textarea-autosize';
 const requireRaw = require.context('!raw-loader!./', false, /\/textarea-autosize\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/theme-provider.js b/docs/pages/api-docs/theme-provider.js
index ab8127ad82ccab..291283d0653eb2 100644
--- a/docs/pages/api-docs/theme-provider.js
+++ b/docs/pages/api-docs/theme-provider.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/theme-provider';
 const requireRaw = require.context('!raw-loader!./', false, /\/theme-provider\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-connector.js b/docs/pages/api-docs/timeline-connector.js
index ab5e275aad35ec..97dd5e7ee95c10 100644
--- a/docs/pages/api-docs/timeline-connector.js
+++ b/docs/pages/api-docs/timeline-connector.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-connector';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-connector\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-content.js b/docs/pages/api-docs/timeline-content.js
index 7f16efa1e055cb..ef74696a1bf6a8 100644
--- a/docs/pages/api-docs/timeline-content.js
+++ b/docs/pages/api-docs/timeline-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-dot.js b/docs/pages/api-docs/timeline-dot.js
index 3ec4ca69bc61cd..c91caa10a1e645 100644
--- a/docs/pages/api-docs/timeline-dot.js
+++ b/docs/pages/api-docs/timeline-dot.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-dot';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-dot\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-item.js b/docs/pages/api-docs/timeline-item.js
index af5c4078d9b53c..63b918de83659a 100644
--- a/docs/pages/api-docs/timeline-item.js
+++ b/docs/pages/api-docs/timeline-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-opposite-content.js b/docs/pages/api-docs/timeline-opposite-content.js
index 6dde2f4a73b263..ea82940d59c0fb 100644
--- a/docs/pages/api-docs/timeline-opposite-content.js
+++ b/docs/pages/api-docs/timeline-opposite-content.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-opposite-content';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-opposite-content\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline-separator.js b/docs/pages/api-docs/timeline-separator.js
index cd7ded3c5424f3..ec9c53631f2a9b 100644
--- a/docs/pages/api-docs/timeline-separator.js
+++ b/docs/pages/api-docs/timeline-separator.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline-separator';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline-separator\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/timeline.js b/docs/pages/api-docs/timeline.js
index 27b3e8e344a6d0..65bd489cc404c1 100644
--- a/docs/pages/api-docs/timeline.js
+++ b/docs/pages/api-docs/timeline.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/timeline';
 const requireRaw = require.context('!raw-loader!./', false, /\/timeline\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/toggle-button-group.js b/docs/pages/api-docs/toggle-button-group.js
index d7aebc0f57f3f1..c6914b73c6e967 100644
--- a/docs/pages/api-docs/toggle-button-group.js
+++ b/docs/pages/api-docs/toggle-button-group.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toggle-button-group';
 const requireRaw = require.context('!raw-loader!./', false, /\/toggle-button-group\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/toggle-button.js b/docs/pages/api-docs/toggle-button.js
index bc795c0b79611b..fde4de3eae72c2 100644
--- a/docs/pages/api-docs/toggle-button.js
+++ b/docs/pages/api-docs/toggle-button.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toggle-button';
 const requireRaw = require.context('!raw-loader!./', false, /\/toggle-button\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/toolbar.js b/docs/pages/api-docs/toolbar.js
index 66695c75f3512f..9bbdd46af1debc 100644
--- a/docs/pages/api-docs/toolbar.js
+++ b/docs/pages/api-docs/toolbar.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/toolbar';
 const requireRaw = require.context('!raw-loader!./', false, /\/toolbar\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tooltip.js b/docs/pages/api-docs/tooltip.js
index 0bb93b6e8bcd06..92f70ad5047d95 100644
--- a/docs/pages/api-docs/tooltip.js
+++ b/docs/pages/api-docs/tooltip.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tooltip';
 const requireRaw = require.context('!raw-loader!./', false, /\/tooltip\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tree-item.js b/docs/pages/api-docs/tree-item.js
index 969e16e6622c0d..68c1526c017d71 100644
--- a/docs/pages/api-docs/tree-item.js
+++ b/docs/pages/api-docs/tree-item.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tree-item';
 const requireRaw = require.context('!raw-loader!./', false, /\/tree-item\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/tree-view.js b/docs/pages/api-docs/tree-view.js
index 95951e715ddb2f..7f61d8f2d092fc 100644
--- a/docs/pages/api-docs/tree-view.js
+++ b/docs/pages/api-docs/tree-view.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/tree-view';
 const requireRaw = require.context('!raw-loader!./', false, /\/tree-view\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/typography.js b/docs/pages/api-docs/typography.js
index 2b2c444849fbee..d742fc850e6017 100644
--- a/docs/pages/api-docs/typography.js
+++ b/docs/pages/api-docs/typography.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/typography';
 const requireRaw = require.context('!raw-loader!./', false, /\/typography\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/unstable-trap-focus.js b/docs/pages/api-docs/unstable-trap-focus.js
index e69acfddf609a0..ac5646b826b3f3 100644
--- a/docs/pages/api-docs/unstable-trap-focus.js
+++ b/docs/pages/api-docs/unstable-trap-focus.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/unstable-trap-focus';
 const requireRaw = require.context('!raw-loader!./', false, /\/unstable-trap-focus\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/api-docs/zoom.js b/docs/pages/api-docs/zoom.js
index ed5d684175e272..ac543caf6097b7 100644
--- a/docs/pages/api-docs/zoom.js
+++ b/docs/pages/api-docs/zoom.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/zoom';
 const requireRaw = require.context('!raw-loader!./', false, /\/zoom\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/about-the-lab.js b/docs/pages/components/about-the-lab.js
index d2d761de9d802f..b81066e9e15415 100644
--- a/docs/pages/components/about-the-lab.js
+++ b/docs/pages/components/about-the-lab.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/about-the-lab';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/accordion.js b/docs/pages/components/accordion.js
index 157a3edbc9ed66..b58bac1d676e58 100644
--- a/docs/pages/components/accordion.js
+++ b/docs/pages/components/accordion.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/accordion';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/alert.js b/docs/pages/components/alert.js
index caeeb16f231c9a..e8b90d9710e34d 100644
--- a/docs/pages/components/alert.js
+++ b/docs/pages/components/alert.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/alert';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/app-bar.js b/docs/pages/components/app-bar.js
index 872f89a59ea6ed..a38507121e0d26 100644
--- a/docs/pages/components/app-bar.js
+++ b/docs/pages/components/app-bar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/app-bar';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/autocomplete.js b/docs/pages/components/autocomplete.js
index 5fc53ba0d27a18..8484e5fcd9c713 100644
--- a/docs/pages/components/autocomplete.js
+++ b/docs/pages/components/autocomplete.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/autocomplete';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/avatars.js b/docs/pages/components/avatars.js
index f3931f00da2951..2739c879f13111 100644
--- a/docs/pages/components/avatars.js
+++ b/docs/pages/components/avatars.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/avatars';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/backdrop.js b/docs/pages/components/backdrop.js
index 7b974b696b2e38..cd30addc66f859 100644
--- a/docs/pages/components/backdrop.js
+++ b/docs/pages/components/backdrop.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/backdrop';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/badges.js b/docs/pages/components/badges.js
index a8b0fb25cd3bd3..c565f8d7ab5774 100644
--- a/docs/pages/components/badges.js
+++ b/docs/pages/components/badges.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/badges';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/bottom-navigation.js b/docs/pages/components/bottom-navigation.js
index 71ad6174c8cefb..e7f3c58fdd1600 100644
--- a/docs/pages/components/bottom-navigation.js
+++ b/docs/pages/components/bottom-navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/bottom-navigation';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/box.js b/docs/pages/components/box.js
index 1d7f243ed36eaa..ab4d1907aaa5ae 100644
--- a/docs/pages/components/box.js
+++ b/docs/pages/components/box.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/box';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/breadcrumbs.js b/docs/pages/components/breadcrumbs.js
index aa8ba52bae168a..92dcbc7a887b8c 100644
--- a/docs/pages/components/breadcrumbs.js
+++ b/docs/pages/components/breadcrumbs.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/breadcrumbs';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/button-group.js b/docs/pages/components/button-group.js
index ca73e3171aa75c..fd5fc5dbf0c230 100644
--- a/docs/pages/components/button-group.js
+++ b/docs/pages/components/button-group.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/button-group';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/buttons.js b/docs/pages/components/buttons.js
index d565016a1978ba..c333ff8b66a946 100644
--- a/docs/pages/components/buttons.js
+++ b/docs/pages/components/buttons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/buttons';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/cards.js b/docs/pages/components/cards.js
index cd85453c646744..554bf6bd6cd05c 100644
--- a/docs/pages/components/cards.js
+++ b/docs/pages/components/cards.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/cards';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/checkboxes.js b/docs/pages/components/checkboxes.js
index 428c0acb89319d..0846472395c7c5 100644
--- a/docs/pages/components/checkboxes.js
+++ b/docs/pages/components/checkboxes.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/checkboxes';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/chips.js b/docs/pages/components/chips.js
index 1510de07d6f607..a7aa86a5c6191a 100644
--- a/docs/pages/components/chips.js
+++ b/docs/pages/components/chips.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/chips';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/click-away-listener.js b/docs/pages/components/click-away-listener.js
index 44aaaac4caeb3a..09b5f2963c7d71 100644
--- a/docs/pages/components/click-away-listener.js
+++ b/docs/pages/components/click-away-listener.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/click-away-listener';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/container.js b/docs/pages/components/container.js
index 590282db210057..91d69ab9cc6065 100644
--- a/docs/pages/components/container.js
+++ b/docs/pages/components/container.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/container';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/css-baseline.js b/docs/pages/components/css-baseline.js
index 1eb660b5071a2e..3fd0aee1f1ab52 100644
--- a/docs/pages/components/css-baseline.js
+++ b/docs/pages/components/css-baseline.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/css-baseline';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/date-picker.js b/docs/pages/components/date-picker.js
index a9faa5bc5db5fb..1f180a0d2149c8 100644
--- a/docs/pages/components/date-picker.js
+++ b/docs/pages/components/date-picker.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/date-picker';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/date-range-picker.js b/docs/pages/components/date-range-picker.js
index fdea211ea31c9d..492c5e438b1c02 100644
--- a/docs/pages/components/date-range-picker.js
+++ b/docs/pages/components/date-range-picker.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/date-range-picker';
@@ -19,7 +19,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/date-time-picker.js b/docs/pages/components/date-time-picker.js
index d76dfa6060f970..92199b233c1232 100644
--- a/docs/pages/components/date-time-picker.js
+++ b/docs/pages/components/date-time-picker.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/date-time-picker';
@@ -19,7 +19,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/dialogs.js b/docs/pages/components/dialogs.js
index cafbf1fe2220ed..78648a94e4892e 100644
--- a/docs/pages/components/dialogs.js
+++ b/docs/pages/components/dialogs.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/dialogs';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/dividers.js b/docs/pages/components/dividers.js
index 6c84837e935265..d3fb5d55acca47 100644
--- a/docs/pages/components/dividers.js
+++ b/docs/pages/components/dividers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/dividers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/drawers.js b/docs/pages/components/drawers.js
index 14395217b34f2f..11c2bb88c51e79 100644
--- a/docs/pages/components/drawers.js
+++ b/docs/pages/components/drawers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/drawers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/floating-action-button.js b/docs/pages/components/floating-action-button.js
index c528df42255e3a..418e33ef5a3eee 100644
--- a/docs/pages/components/floating-action-button.js
+++ b/docs/pages/components/floating-action-button.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/floating-action-button';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/grid.js b/docs/pages/components/grid.js
index c5903957da1ffe..9c8ff6c8d4a30f 100644
--- a/docs/pages/components/grid.js
+++ b/docs/pages/components/grid.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/grid';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/hidden.js b/docs/pages/components/hidden.js
index 98e28b0595a52e..29c51fac37d6bf 100644
--- a/docs/pages/components/hidden.js
+++ b/docs/pages/components/hidden.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/hidden';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/icons.js b/docs/pages/components/icons.js
index 9f83f4307fe265..a621477851858a 100644
--- a/docs/pages/components/icons.js
+++ b/docs/pages/components/icons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/icons';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/image-list.js b/docs/pages/components/image-list.js
index baeeb2c5e17286..cc22c9010ec447 100644
--- a/docs/pages/components/image-list.js
+++ b/docs/pages/components/image-list.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/image-list';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/links.js b/docs/pages/components/links.js
index c222fc7075c58a..82b1f6b5bcea91 100644
--- a/docs/pages/components/links.js
+++ b/docs/pages/components/links.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/links';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/lists.js b/docs/pages/components/lists.js
index 4e9cc0a77973b9..5adc5db4e3fdb2 100644
--- a/docs/pages/components/lists.js
+++ b/docs/pages/components/lists.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/lists';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js
index bf956663a8ec9e..aa70b0a49b8d03 100644
--- a/docs/pages/components/material-icons.js
+++ b/docs/pages/components/material-icons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/material-icons';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/menus.js b/docs/pages/components/menus.js
index cae61f537e00b8..414333cba32d90 100644
--- a/docs/pages/components/menus.js
+++ b/docs/pages/components/menus.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/menus';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/modal.js b/docs/pages/components/modal.js
index 1cc29b4338ac96..d4e47fa9515f70 100644
--- a/docs/pages/components/modal.js
+++ b/docs/pages/components/modal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/modal';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/no-ssr.js b/docs/pages/components/no-ssr.js
index 0b7c1491cac336..ce5499dcc5913b 100644
--- a/docs/pages/components/no-ssr.js
+++ b/docs/pages/components/no-ssr.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/no-ssr';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/pagination.js b/docs/pages/components/pagination.js
index 7ce8419ff6c4f1..42817e57c01dd2 100644
--- a/docs/pages/components/pagination.js
+++ b/docs/pages/components/pagination.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/pagination';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/paper.js b/docs/pages/components/paper.js
index fcc18426079d90..584b1c36c4966c 100644
--- a/docs/pages/components/paper.js
+++ b/docs/pages/components/paper.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/paper';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/pickers.js b/docs/pages/components/pickers.js
index 76f32c054dd463..91fad8799d32c8 100644
--- a/docs/pages/components/pickers.js
+++ b/docs/pages/components/pickers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/pickers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/popover.js b/docs/pages/components/popover.js
index 2cec55530a588c..12720009fb84c7 100644
--- a/docs/pages/components/popover.js
+++ b/docs/pages/components/popover.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/popover';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/popper.js b/docs/pages/components/popper.js
index fda9910ec30cd1..d16bbf3e981e72 100644
--- a/docs/pages/components/popper.js
+++ b/docs/pages/components/popper.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/popper';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/portal.js b/docs/pages/components/portal.js
index 03d4783054acad..eea4107679e7c7 100644
--- a/docs/pages/components/portal.js
+++ b/docs/pages/components/portal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/portal';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/progress.js b/docs/pages/components/progress.js
index 999fbf6558e44a..ad2ad1c8daa14b 100644
--- a/docs/pages/components/progress.js
+++ b/docs/pages/components/progress.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/progress';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/radio-buttons.js b/docs/pages/components/radio-buttons.js
index 22805f47b25207..1b9ccbaeeae18f 100644
--- a/docs/pages/components/radio-buttons.js
+++ b/docs/pages/components/radio-buttons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/radio-buttons';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/rating.js b/docs/pages/components/rating.js
index a88dae26ad7394..33ef682cbcf315 100644
--- a/docs/pages/components/rating.js
+++ b/docs/pages/components/rating.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/rating';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/selects.js b/docs/pages/components/selects.js
index c2c1c92790772d..a3e66bf2cf6ded 100644
--- a/docs/pages/components/selects.js
+++ b/docs/pages/components/selects.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/selects';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/skeleton.js b/docs/pages/components/skeleton.js
index 7d1efeec377d11..472882dd509d76 100644
--- a/docs/pages/components/skeleton.js
+++ b/docs/pages/components/skeleton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/skeleton';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/slider.js b/docs/pages/components/slider.js
index 5b8dd7ca95fd48..99c48a1de92944 100644
--- a/docs/pages/components/slider.js
+++ b/docs/pages/components/slider.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/slider';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/snackbars.js b/docs/pages/components/snackbars.js
index 880049dde51089..6d49c6cc7fcb3b 100644
--- a/docs/pages/components/snackbars.js
+++ b/docs/pages/components/snackbars.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/snackbars';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/speed-dial.js b/docs/pages/components/speed-dial.js
index eb9d454dd14f53..e49927c0cc4983 100644
--- a/docs/pages/components/speed-dial.js
+++ b/docs/pages/components/speed-dial.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/speed-dial';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/steppers.js b/docs/pages/components/steppers.js
index 2b43a770386eb8..8cad22c6201dc6 100644
--- a/docs/pages/components/steppers.js
+++ b/docs/pages/components/steppers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/steppers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/switches.js b/docs/pages/components/switches.js
index 5e42d3700b2281..7ea400e56fa25d 100644
--- a/docs/pages/components/switches.js
+++ b/docs/pages/components/switches.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/switches';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tables.js b/docs/pages/components/tables.js
index f693852c883dab..636784ef527485 100644
--- a/docs/pages/components/tables.js
+++ b/docs/pages/components/tables.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/tables';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tabs.js b/docs/pages/components/tabs.js
index cca0e226d3440d..7783dc2be1a4f1 100644
--- a/docs/pages/components/tabs.js
+++ b/docs/pages/components/tabs.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/tabs';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/text-fields.js b/docs/pages/components/text-fields.js
index 8abebdab562849..38d309f8206f81 100644
--- a/docs/pages/components/text-fields.js
+++ b/docs/pages/components/text-fields.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/text-fields';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/textarea-autosize.js b/docs/pages/components/textarea-autosize.js
index 17c4d8a751fff6..a00b6f72032abc 100644
--- a/docs/pages/components/textarea-autosize.js
+++ b/docs/pages/components/textarea-autosize.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/textarea-autosize';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/time-picker.js b/docs/pages/components/time-picker.js
index c474df51e50e68..dff298f6884948 100644
--- a/docs/pages/components/time-picker.js
+++ b/docs/pages/components/time-picker.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/time-picker';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/timeline.js b/docs/pages/components/timeline.js
index 3784761db5d845..e5964527f9f2eb 100644
--- a/docs/pages/components/timeline.js
+++ b/docs/pages/components/timeline.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/timeline';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/toggle-button.js b/docs/pages/components/toggle-button.js
index e53e8cd7f4c83b..a621266c502dff 100644
--- a/docs/pages/components/toggle-button.js
+++ b/docs/pages/components/toggle-button.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/toggle-button';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tooltips.js b/docs/pages/components/tooltips.js
index bc1a393695e804..4fe4a9a20e43bc 100644
--- a/docs/pages/components/tooltips.js
+++ b/docs/pages/components/tooltips.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/tooltips';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/transfer-list.js b/docs/pages/components/transfer-list.js
index 90a77dfd41d53c..65d997ade83118 100644
--- a/docs/pages/components/transfer-list.js
+++ b/docs/pages/components/transfer-list.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/transfer-list';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/transitions.js b/docs/pages/components/transitions.js
index a58fd9520596df..3c5c2d3cd11ff0 100644
--- a/docs/pages/components/transitions.js
+++ b/docs/pages/components/transitions.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/transitions';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/trap-focus.js b/docs/pages/components/trap-focus.js
index f26ed07bbadda2..9d90a5fbfb89fd 100644
--- a/docs/pages/components/trap-focus.js
+++ b/docs/pages/components/trap-focus.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/trap-focus';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/tree-view.js b/docs/pages/components/tree-view.js
index 0173b9eafce9c5..a412f7c26384f6 100644
--- a/docs/pages/components/tree-view.js
+++ b/docs/pages/components/tree-view.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/tree-view';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/typography.js b/docs/pages/components/typography.js
index 2ecd6ea0c6fa69..a0757f324d3edd 100644
--- a/docs/pages/components/typography.js
+++ b/docs/pages/components/typography.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/typography';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/components/use-media-query.js b/docs/pages/components/use-media-query.js
index 7c714d543ff434..a2348293204f08 100644
--- a/docs/pages/components/use-media-query.js
+++ b/docs/pages/components/use-media-query.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'components/use-media-query';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/breakpoints.js b/docs/pages/customization/breakpoints.js
index 2896541fd36c79..c8bf2130e57773 100644
--- a/docs/pages/customization/breakpoints.js
+++ b/docs/pages/customization/breakpoints.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/breakpoints';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/color.js b/docs/pages/customization/color.js
index 59490c17a3134f..7fa414e781bafe 100644
--- a/docs/pages/customization/color.js
+++ b/docs/pages/customization/color.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/color';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/components.js b/docs/pages/customization/components.js
index 173886315cb663..b4409329c63047 100644
--- a/docs/pages/customization/components.js
+++ b/docs/pages/customization/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/components';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/default-theme.js b/docs/pages/customization/default-theme.js
index bf3399340010f2..d98d60bdc10e07 100644
--- a/docs/pages/customization/default-theme.js
+++ b/docs/pages/customization/default-theme.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/default-theme';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/density.js b/docs/pages/customization/density.js
index bcba5f221af3aa..bc1974fb256d79 100644
--- a/docs/pages/customization/density.js
+++ b/docs/pages/customization/density.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/density';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/globals.js b/docs/pages/customization/globals.js
index e557a6793d2503..6dac2c7069d24e 100644
--- a/docs/pages/customization/globals.js
+++ b/docs/pages/customization/globals.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/globals';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/palette.js b/docs/pages/customization/palette.js
index 9047c47902a9af..32f27855fadb3f 100644
--- a/docs/pages/customization/palette.js
+++ b/docs/pages/customization/palette.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/palette';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/spacing.js b/docs/pages/customization/spacing.js
index 827e1574cee567..f2869eb3ff4234 100644
--- a/docs/pages/customization/spacing.js
+++ b/docs/pages/customization/spacing.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/spacing';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/theming.js b/docs/pages/customization/theming.js
index 98a026203b492a..84c75ebefb698a 100644
--- a/docs/pages/customization/theming.js
+++ b/docs/pages/customization/theming.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/theming';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/transitions.js b/docs/pages/customization/transitions.js
index 22119aa4cdbee1..f81a8d1675c9f0 100644
--- a/docs/pages/customization/transitions.js
+++ b/docs/pages/customization/transitions.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/transitions';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/typography.js b/docs/pages/customization/typography.js
index 0c071d0efbb839..403f61b29a3f8d 100644
--- a/docs/pages/customization/typography.js
+++ b/docs/pages/customization/typography.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/typography';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/customization/z-index.js b/docs/pages/customization/z-index.js
index 17edddcd9ec3cf..7d83dc68ad79ef 100644
--- a/docs/pages/customization/z-index.js
+++ b/docs/pages/customization/z-index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'customization/z-index';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/backers.js b/docs/pages/discover-more/backers.js
index 79ffbb4d0e3d38..543659135bc382 100644
--- a/docs/pages/discover-more/backers.js
+++ b/docs/pages/discover-more/backers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/backers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableAd />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} disableAd />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/changelog.js b/docs/pages/discover-more/changelog.js
index a38980001fd866..eff9050041698d 100644
--- a/docs/pages/discover-more/changelog.js
+++ b/docs/pages/discover-more/changelog.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/changelog';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/languages.js b/docs/pages/discover-more/languages.js
index ef6ba44285c6ef..0f3a0ef72f8e59 100644
--- a/docs/pages/discover-more/languages.js
+++ b/docs/pages/discover-more/languages.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/languages';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/related-projects.js b/docs/pages/discover-more/related-projects.js
index 732aa971a07088..561d32100f524d 100644
--- a/docs/pages/discover-more/related-projects.js
+++ b/docs/pages/discover-more/related-projects.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/related-projects';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/roadmap.js b/docs/pages/discover-more/roadmap.js
index 3784cfe38447fb..00fe00cd9edc60 100644
--- a/docs/pages/discover-more/roadmap.js
+++ b/docs/pages/discover-more/roadmap.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/roadmap';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/showcase.js b/docs/pages/discover-more/showcase.js
index d6ae13478437e8..9bbcae7aef9693 100644
--- a/docs/pages/discover-more/showcase.js
+++ b/docs/pages/discover-more/showcase.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/showcase';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/team.js b/docs/pages/discover-more/team.js
index 80516c289db886..016642d6ce7201 100644
--- a/docs/pages/discover-more/team.js
+++ b/docs/pages/discover-more/team.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/team';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/discover-more/vision.js b/docs/pages/discover-more/vision.js
index 439eb364c87c9e..89a7f6b748df2f 100644
--- a/docs/pages/discover-more/vision.js
+++ b/docs/pages/discover-more/vision.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'discover-more/vision';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/example-projects.js b/docs/pages/getting-started/example-projects.js
index 86b60feb55e321..89813d8223b8fc 100644
--- a/docs/pages/getting-started/example-projects.js
+++ b/docs/pages/getting-started/example-projects.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/example-projects';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/faq.js b/docs/pages/getting-started/faq.js
index c98948e2de0970..23c39291ae08e4 100644
--- a/docs/pages/getting-started/faq.js
+++ b/docs/pages/getting-started/faq.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/faq';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/installation.js b/docs/pages/getting-started/installation.js
index 411d0379e0e830..684751408b1ea1 100644
--- a/docs/pages/getting-started/installation.js
+++ b/docs/pages/getting-started/installation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/installation';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/learn.js b/docs/pages/getting-started/learn.js
index e38f5fbfd98178..6606945f29c819 100644
--- a/docs/pages/getting-started/learn.js
+++ b/docs/pages/getting-started/learn.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/learn';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/support.js b/docs/pages/getting-started/support.js
index 94dd215378753a..ce61123aca1e80 100644
--- a/docs/pages/getting-started/support.js
+++ b/docs/pages/getting-started/support.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/support';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/supported-components.js b/docs/pages/getting-started/supported-components.js
index 98a056fc639dac..6e3dd842f93a50 100644
--- a/docs/pages/getting-started/supported-components.js
+++ b/docs/pages/getting-started/supported-components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/supported-components';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/supported-platforms.js b/docs/pages/getting-started/supported-platforms.js
index fd08a837badf41..c2deca40e6ddc9 100644
--- a/docs/pages/getting-started/supported-platforms.js
+++ b/docs/pages/getting-started/supported-platforms.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/supported-platforms';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/templates.js b/docs/pages/getting-started/templates.js
index 1ea2b0ad236061..fc9fdc043fa282 100644
--- a/docs/pages/getting-started/templates.js
+++ b/docs/pages/getting-started/templates.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/templates';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/getting-started/usage.js b/docs/pages/getting-started/usage.js
index 70f1efc126cc0e..03ea939328db06 100644
--- a/docs/pages/getting-started/usage.js
+++ b/docs/pages/getting-started/usage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'getting-started/usage';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/api.js b/docs/pages/guides/api.js
index 54410979052ece..7a165228df14b0 100644
--- a/docs/pages/guides/api.js
+++ b/docs/pages/guides/api.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/api';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/composition.js b/docs/pages/guides/composition.js
index 3bc0348191f454..3e729fbd28332a 100644
--- a/docs/pages/guides/composition.js
+++ b/docs/pages/guides/composition.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/composition';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/content-security-policy.js b/docs/pages/guides/content-security-policy.js
index efb440f9c1018b..5d9a361177899c 100644
--- a/docs/pages/guides/content-security-policy.js
+++ b/docs/pages/guides/content-security-policy.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/content-security-policy';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/flow.js b/docs/pages/guides/flow.js
index 620b5e83b61c16..68bccbcce40d4c 100644
--- a/docs/pages/guides/flow.js
+++ b/docs/pages/guides/flow.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/flow';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/interoperability.js b/docs/pages/guides/interoperability.js
index baa085bf45e9fa..ad7659d688a655 100644
--- a/docs/pages/guides/interoperability.js
+++ b/docs/pages/guides/interoperability.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/interoperability';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/localization.js b/docs/pages/guides/localization.js
index 2208b4b5b4127d..1018e6ce1ea5e4 100644
--- a/docs/pages/guides/localization.js
+++ b/docs/pages/guides/localization.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/localization';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/migration-v0x.js b/docs/pages/guides/migration-v0x.js
index e2c7f284f8a9e3..81770ac623ff3f 100644
--- a/docs/pages/guides/migration-v0x.js
+++ b/docs/pages/guides/migration-v0x.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/migration-v0x';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/migration-v3.js b/docs/pages/guides/migration-v3.js
index 50f422663f420f..4b432f2c6ef545 100644
--- a/docs/pages/guides/migration-v3.js
+++ b/docs/pages/guides/migration-v3.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/migration-v3';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/migration-v4.js b/docs/pages/guides/migration-v4.js
index 8d294dbac222d9..7537297e151267 100644
--- a/docs/pages/guides/migration-v4.js
+++ b/docs/pages/guides/migration-v4.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/migration-v4';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/minimizing-bundle-size.js b/docs/pages/guides/minimizing-bundle-size.js
index e60031dfb008aa..2a82fde17aa4bd 100644
--- a/docs/pages/guides/minimizing-bundle-size.js
+++ b/docs/pages/guides/minimizing-bundle-size.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/minimizing-bundle-size';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/pickers-migration.js b/docs/pages/guides/pickers-migration.js
index 85b2a6fe43851b..d8a482685951c9 100644
--- a/docs/pages/guides/pickers-migration.js
+++ b/docs/pages/guides/pickers-migration.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/pickers-migration';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/responsive-ui.js b/docs/pages/guides/responsive-ui.js
index 88a79822421a92..18f6148cdc91f3 100644
--- a/docs/pages/guides/responsive-ui.js
+++ b/docs/pages/guides/responsive-ui.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/responsive-ui';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/right-to-left.js b/docs/pages/guides/right-to-left.js
index 55d226694df7ba..db76721d640a29 100644
--- a/docs/pages/guides/right-to-left.js
+++ b/docs/pages/guides/right-to-left.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/right-to-left';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/server-rendering.js b/docs/pages/guides/server-rendering.js
index 8f7eafa2838cf3..2486fcca116928 100644
--- a/docs/pages/guides/server-rendering.js
+++ b/docs/pages/guides/server-rendering.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/server-rendering';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/testing.js b/docs/pages/guides/testing.js
index cf85a36d14c021..a8832e66974691 100644
--- a/docs/pages/guides/testing.js
+++ b/docs/pages/guides/testing.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/testing';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/guides/typescript.js b/docs/pages/guides/typescript.js
index 28245b0c7ac647..22709c649538c1 100644
--- a/docs/pages/guides/typescript.js
+++ b/docs/pages/guides/typescript.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'guides/typescript';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/performance/api.js b/docs/pages/performance/api.js
new file mode 100644
index 00000000000000..1b4743d9a3694b
--- /dev/null
+++ b/docs/pages/performance/api.js
@@ -0,0 +1,219 @@
+import React from 'react';
+import TopLayoutApi from 'docs/src/modules/components/TopLayoutApi';
+
+export default function Page() {
+  const pageContent = {
+    props: {
+      action: {
+        type: {
+          name: 'node',
+        },
+      },
+      children: {
+        type: {
+          name: 'node',
+        },
+      },
+      classes: {
+        type: {
+          name: 'object',
+        },
+      },
+      className: {
+        type: {
+          name: 'string',
+        },
+        required: false,
+        description: '@ignore',
+      },
+      closeText: {
+        type: {
+          name: 'string',
+        },
+        default: "'Close'",
+      },
+      color: {
+        type: {
+          name: 'enum',
+          description:
+            "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'",
+        },
+      },
+      icon: {
+        type: {
+          name: 'node',
+        },
+      },
+      iconMapping: {
+        type: {
+          name: 'shape',
+          description: '{ error?: node, info?: node, success?: node, warning?: node }',
+        },
+      },
+      onClose: {
+        type: {
+          name: 'func',
+        },
+      },
+      role: {
+        type: {
+          name: 'string',
+        },
+        default: "'alert'",
+      },
+      severity: {
+        type: {
+          name: 'enum',
+          description:
+            "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'",
+        },
+        default: "'success'",
+      },
+      variant: {
+        type: {
+          name: 'union',
+          description:
+            "'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string",
+        },
+        default: "'standard'",
+      },
+    },
+    name: 'Alert',
+    styles: {
+      classes: [
+        'root',
+        'filled',
+        'outlined',
+        'standard',
+        'standardSuccess',
+        'standardInfo',
+        'standardWarning',
+        'standardError',
+        'outlinedSuccess',
+        'outlinedInfo',
+        'outlinedWarning',
+        'outlinedError',
+        'filledSuccess',
+        'filledInfo',
+        'filledWarning',
+        'filledError',
+        'icon',
+        'message',
+        'action',
+      ],
+      globalClasses: {},
+    },
+    spread: true,
+    forwardsRefTo: 'HTMLDivElement',
+    filename: '/packages/material-ui/src/Alert/Alert.js',
+    inheritance: {
+      component: 'Paper',
+      pathname: '/api/paper/',
+    },
+    demos: '<ul><li><a href="/components/alert/">Alert</a></li></ul>',
+    styledComponent: false,
+    componentDescription: {
+      en: null,
+    },
+    propDescriptions: {
+      en: {
+        action: 'The action to display. It renders after the message, at the end of the alert.',
+        children: 'The content of the component.',
+        classes:
+          'Override or extend the styles applied to the component. See <a href="#css">CSS API</a> below for more details.',
+        closeText:
+          'Override the default label for the <em>close popup</em> icon button.\n\nFor localization purposes, you can use the provided <a href="/guides/localization/">translations</a>.',
+        color:
+          'The main color for the alert. Unless provided, the value is taken from the <code>severity</code> prop.',
+        icon:
+          'Override the icon displayed before the children.\nUnless provided, the icon is mapped to the value of the <code>severity</code> prop.',
+        iconMapping:
+          'The component maps the <code>severity</code> prop to a range of different icons,\nfor instance success to <code>&lt;SuccessOutlined&gt;</code>.\nIf you wish to change this mapping, you can provide your own.\nAlternatively, you can use the <code>icon</code> prop to override the icon displayed.',
+        onClose:
+          'Callback fired when the component requests to be closed.\nWhen provided and no <code>action</code> prop is set, a close icon button is displayed that triggers the callback when clicked.\n\n@param {object} event The event source of the callback.',
+        role: 'The ARIA role attribute of the element.',
+        severity: 'The severity of the alert. This defines the color and icon used.',
+        variant: 'The variant to use.',
+      },
+    },
+    classDescriptions: {
+      en: {
+        root: {
+          description: 'Styles applied to the root element.',
+        },
+        filled: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="filled"</code>',
+        },
+        outlined: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="outlined"</code>',
+        },
+        standard: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="standard"</code>',
+        },
+        standardSuccess: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="standard"</code> and <code>color="success"</code>',
+        },
+        standardInfo: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="standard"</code> and <code>color="info"</code>',
+        },
+        standardWarning: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="standard"</code> and <code>color="warning"</code>',
+        },
+        standardError: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="standard"</code> and <code>color="error"</code>',
+        },
+        outlinedSuccess: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="outlined"</code> and <code>color="success"</code>',
+        },
+        outlinedInfo: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="outlined"</code> and <code>color="info"</code>',
+        },
+        outlinedWarning: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="outlined"</code> and <code>color="warning"</code>',
+        },
+        outlinedError: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="outlined"</code> and <code>color="error"</code>',
+        },
+        filledSuccess: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="filled"</code> and <code>color="success"</code>',
+        },
+        filledInfo: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="filled"</code> and <code>color="info"</code>',
+        },
+        filledWarning: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="filled"</code> and <code>color="warning"</code>',
+        },
+        filledError: {
+          description: 'Styles applied to the root element if {{conditions}}.',
+          conditions: '<code>variant="filled"</code> and <code>color="error"</code>',
+        },
+        icon: {
+          description: 'Styles applied to the icon wrapper element.',
+        },
+        message: {
+          description: 'Styles applied to the message wrapper element.',
+        },
+        action: {
+          description: 'Styles applied to the action wrapper element if {{conditions}}.',
+          conditions: '<code>action</code> is provided',
+        },
+      },
+    },
+  };
+
+  return <TopLayoutApi pageContent={pageContent} />;
+}
diff --git a/docs/pages/production-error.js b/docs/pages/production-error.js
index d7fbd8912cca35..7aa3f1626ef036 100644
--- a/docs/pages/production-error.js
+++ b/docs/pages/production-error.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'production-error';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} disableAd docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} disableAd docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/advanced.js b/docs/pages/styles/advanced.js
index faf4b74d8caeba..30faad6f94fef4 100644
--- a/docs/pages/styles/advanced.js
+++ b/docs/pages/styles/advanced.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'styles/advanced';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/api.js b/docs/pages/styles/api.js
index 1045dfb0162583..c1949595c7c1ae 100644
--- a/docs/pages/styles/api.js
+++ b/docs/pages/styles/api.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'styles/api';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/styles/basics.js b/docs/pages/styles/basics.js
index 54eb4e7b320097..b84964450745bc 100644
--- a/docs/pages/styles/basics.js
+++ b/docs/pages/styles/basics.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'styles/basics';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/advanced.js b/docs/pages/system/advanced.js
index 48b4a77219865a..c2096e0eac7911 100644
--- a/docs/pages/system/advanced.js
+++ b/docs/pages/system/advanced.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/advanced';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/basics.js b/docs/pages/system/basics.js
index 7df1a73fe0fe2d..b7bdd1b7d4c869 100644
--- a/docs/pages/system/basics.js
+++ b/docs/pages/system/basics.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/basics';
@@ -15,7 +15,7 @@ const requireRaw = require.context(
 requireDemo.keys().map(requireDemo);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/borders.js b/docs/pages/system/borders.js
index b8388877820632..a1b38ed048cb3b 100644
--- a/docs/pages/system/borders.js
+++ b/docs/pages/system/borders.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/borders';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/display.js b/docs/pages/system/display.js
index cfa991bcdd2899..75b21fa6653fa2 100644
--- a/docs/pages/system/display.js
+++ b/docs/pages/system/display.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/display';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/flexbox.js b/docs/pages/system/flexbox.js
index 2cf4b44d8dc746..66591a92a16d9b 100644
--- a/docs/pages/system/flexbox.js
+++ b/docs/pages/system/flexbox.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/flexbox';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/palette.js b/docs/pages/system/palette.js
index 2c32a43772aea5..47e783d80dd01c 100644
--- a/docs/pages/system/palette.js
+++ b/docs/pages/system/palette.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/palette';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/positions.js b/docs/pages/system/positions.js
index 9b66acf55d5456..8e12c2045b4236 100644
--- a/docs/pages/system/positions.js
+++ b/docs/pages/system/positions.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/positions';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/properties.js b/docs/pages/system/properties.js
index 11716668d36780..49cba25df19402 100644
--- a/docs/pages/system/properties.js
+++ b/docs/pages/system/properties.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/properties';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/screen-readers.js b/docs/pages/system/screen-readers.js
index 4cd531b6c3a98c..701d4edfc96d58 100644
--- a/docs/pages/system/screen-readers.js
+++ b/docs/pages/system/screen-readers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/screen-readers';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/shadows.js b/docs/pages/system/shadows.js
index 5c135a68546153..94aa9e0991968b 100644
--- a/docs/pages/system/shadows.js
+++ b/docs/pages/system/shadows.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/shadows';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/sizing.js b/docs/pages/system/sizing.js
index 2bb3a26a5ae683..795a0651ba35b5 100644
--- a/docs/pages/system/sizing.js
+++ b/docs/pages/system/sizing.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/sizing';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/spacing.js b/docs/pages/system/spacing.js
index 58efaabfc26516..aca37cbcb03076 100644
--- a/docs/pages/system/spacing.js
+++ b/docs/pages/system/spacing.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/spacing';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/system/typography.js b/docs/pages/system/typography.js
index 19bfc7e4cc801d..6f9b97fbccbf91 100644
--- a/docs/pages/system/typography.js
+++ b/docs/pages/system/typography.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'system/typography';
@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index ecd5c8d4cc1ece..c11eae3e73d74e 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import sortedUniqBy from 'lodash/sortedUniqBy';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'versions';
@@ -8,7 +8,7 @@ const requireDemo = require.context('docs/src/pages/versions/', false, /\.(js|ts
 const requireRaw = require.context('!raw-loader!../src/pages/versions', false, /\.(js|md|tsx)$/);
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <TopLayoutDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 function formatVersion(version) {
diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts
index 0e19d8e2122969..27935e7b10a077 100644
--- a/docs/scripts/buildApi.ts
+++ b/docs/scripts/buildApi.ts
@@ -526,14 +526,14 @@ async function buildDocs(options: {
   writeFileSync(
     path.resolve(outputDirectory, `${kebabCase(reactAPI.name)}.js`),
     `import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutDocs from 'docs/src/modules/components/TopLayoutDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const pageFilename = 'api/${kebabCase(reactAPI.name)}';
 const requireRaw = require.context('!raw-loader!./', false, /\\/${kebabCase(reactAPI.name)}\\.md$/);
 
 export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+  return <TopLayoutDocs docs={docs} />;
 }
 
 Page.getInitialProps = () => {
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
new file mode 100644
index 00000000000000..2debb02d4316e7
--- /dev/null
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import { exactProp } from '@material-ui/utils';
+import NoSsr from '@material-ui/core/NoSsr';
+import Head from 'docs/src/modules/components/Head';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import EditPage from 'docs/src/modules/components/EditPage';
+import AppContainer from 'docs/src/modules/components/AppContainer';
+import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
+import Ad from 'docs/src/modules/components/Ad';
+import AdManager from 'docs/src/modules/components/AdManager';
+import AdGuest from 'docs/src/modules/components/AdGuest';
+import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  container: {
+    position: 'relative',
+  },
+  actions: {
+    position: 'absolute',
+    right: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
+  ad: {
+    '& .description': {
+      marginBottom: 198,
+    },
+    '& .description.ad': {
+      marginBottom: 40,
+    },
+  },
+  toc: {
+    [theme.breakpoints.up('sm')]: {
+      width: 'calc(100% - 175px)',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: 'calc(100% - 175px - 240px)',
+    },
+  },
+}));
+
+function AppLayoutDocs(props) {
+  const {
+    children,
+    description,
+    disableAd = false,
+    disableToc = false,
+    location,
+    title,
+    toc,
+  } = props;
+  const classes = useStyles();
+
+  if (description === undefined) {
+    throw new Error('Missing description in the page');
+  }
+
+  return (
+    <AppFrame>
+      <AdManager>
+        <Head title={`${title} - Material-UI`} description={description} />
+        {disableAd ? null : (
+          <AdGuest>
+            <Ad placement="body" />
+          </AdGuest>
+        )}
+        <div
+          className={clsx(classes.root, {
+            [classes.ad]: !disableAd,
+            [classes.toc]: !disableToc,
+          })}
+        >
+          <AppContainer className={classes.container}>
+            <div className={classes.actions}>
+              {location && <EditPage markdownLocation={location} />}
+            </div>
+            {children}
+            <NoSsr>
+              <AppLayoutDocsFooter />
+            </NoSsr>
+          </AppContainer>
+        </div>
+        {disableToc ? null : <AppTableOfContents items={toc} />}
+      </AdManager>
+    </AppFrame>
+  );
+}
+
+AppLayoutDocs.propTypes = {
+  children: PropTypes.node.isRequired,
+  description: PropTypes.string.isRequired,
+  disableAd: PropTypes.bool.isRequired,
+  disableToc: PropTypes.bool.isRequired,
+  location: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  toc: PropTypes.array.isRequired,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  AppLayoutDocs.propTypes = exactProp(AppLayoutDocs.propTypes);
+}
+
+export default AppLayoutDocs;
diff --git a/docs/src/modules/components/MarkdownDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
similarity index 95%
rename from docs/src/modules/components/MarkdownDocsFooter.js
rename to docs/src/modules/components/AppLayoutDocsFooter.js
index 44b41634803d9f..2dded7799a9631 100644
--- a/docs/src/modules/components/MarkdownDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -1,8 +1,6 @@
 /* eslint-disable no-restricted-globals */
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { exactProp } from '@material-ui/utils';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import DialogActions from '@material-ui/core/DialogActions';
 import TextField from '@material-ui/core/TextField';
 import Collapse from '@material-ui/core/Collapse';
@@ -22,7 +20,7 @@ import PageContext from 'docs/src/modules/components/PageContext';
 import Link from 'docs/src/modules/components/Link';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
-const styles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(12),
   },
@@ -48,7 +46,7 @@ const styles = (theme) => ({
       width: '100%',
     },
   },
-});
+}));
 
 function flattenPages(pages, current = []) {
   return pages.reduce((items, item) => {
@@ -137,8 +135,8 @@ function getCurrentRating(pathname) {
   return userFeedback && userFeedback[pathname] && userFeedback[pathname].rating;
 }
 
-function MarkdownDocsFooter(props) {
-  const { classes } = props;
+export default function AppLayoutDocsFooter() {
+  const classes = useStyles();
   const t = useTranslate();
   const userLanguage = useUserLanguage();
   const { activePage, pages } = React.useContext(PageContext);
@@ -315,13 +313,3 @@ function MarkdownDocsFooter(props) {
     </React.Fragment>
   );
 }
-
-MarkdownDocsFooter.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  MarkdownDocsFooter.propTypes = exactProp(MarkdownDocsFooter.propTypes);
-}
-
-export default withStyles(styles)(MarkdownDocsFooter);
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index f2ea0163488181..7bab8ee5753d53 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import copy from 'clipboard-copy';
 import LZString from 'lz-string';
 import { useDispatch } from 'react-redux';
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
deleted file mode 100644
index 7b925a63b2f709..00000000000000
--- a/docs/src/modules/components/MarkdownDocs.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import NoSsr from '@material-ui/core/NoSsr';
-import { exactProp } from '@material-ui/utils';
-import Head from 'docs/src/modules/components/Head';
-import AppFrame from 'docs/src/modules/components/AppFrame';
-import EditPage from 'docs/src/modules/components/EditPage';
-import AppContainer from 'docs/src/modules/components/AppContainer';
-import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
-import Demo from 'docs/src/modules/components/Demo';
-import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import Ad from 'docs/src/modules/components/Ad';
-import AdManager from 'docs/src/modules/components/AdManager';
-import AdGuest from 'docs/src/modules/components/AdGuest';
-import ComponentLinkHeader from 'docs/src/modules/components/ComponentLinkHeader';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
-import MarkdownDocsFooter from './MarkdownDocsFooter';
-
-const markdownComponents = {
-  'modules/components/ComponentLinkHeader.js': ComponentLinkHeader,
-};
-
-const styles = (theme) => ({
-  root: {
-    width: '100%',
-  },
-  container: {
-    position: 'relative',
-  },
-  actions: {
-    position: 'absolute',
-    right: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-  },
-  ad: {
-    '& .description': {
-      marginBottom: 198,
-    },
-    '& .description.ad': {
-      marginBottom: 40,
-    },
-  },
-  toc: {
-    [theme.breakpoints.up('sm')]: {
-      width: 'calc(100% - 175px)',
-    },
-    [theme.breakpoints.up('lg')]: {
-      width: 'calc(100% - 175px - 240px)',
-    },
-  },
-});
-
-function MarkdownDocs(props) {
-  const { classes, disableAd = false, disableToc = false, demos = {}, docs, requireDemo } = props;
-
-  const t = useTranslate();
-  const userLanguage = useUserLanguage();
-  const { description, location, rendered, title, toc, headers } = docs[userLanguage] || docs.en;
-  if (description === undefined) {
-    throw new Error('Missing description in the page');
-  }
-
-  return (
-    <AppFrame>
-      <AdManager>
-        <Head title={`${title} - Material-UI`} description={description} />
-        {disableAd ? null : (
-          <AdGuest>
-            <Ad placement="body" />
-          </AdGuest>
-        )}
-        <div
-          className={clsx(classes.root, {
-            [classes.ad]: !disableAd,
-            [classes.toc]: !disableToc,
-          })}
-        >
-          <AppContainer className={classes.container}>
-            <div className={classes.actions}>
-              <EditPage markdownLocation={location} />
-            </div>
-            {rendered.map((renderedMarkdownOrDemo, index) => {
-              if (typeof renderedMarkdownOrDemo === 'string') {
-                return <MarkdownElement key={index} renderedMarkdown={renderedMarkdownOrDemo} />;
-              }
-
-              if (renderedMarkdownOrDemo.component) {
-                const Component = markdownComponents[renderedMarkdownOrDemo.component];
-                return <Component key={index} headers={headers} options={renderedMarkdownOrDemo} />;
-              }
-
-              const name = renderedMarkdownOrDemo.demo;
-              const demo = demos?.[name];
-              if (demo === undefined) {
-                const errorMessage = [
-                  `Missing demo: ${name}. You can use one of the following:`,
-                  Object.keys(demos),
-                ].join('\n');
-
-                if (userLanguage === 'en') {
-                  throw new Error(errorMessage);
-                }
-
-                if (process.env.NODE_ENV !== 'production') {
-                  console.error(errorMessage);
-                }
-
-                const warnIcon = (
-                  <span role="img" aria-label={t('emojiWarning')}>
-                    ⚠️
-                  </span>
-                );
-                return (
-                  <div key={index}>
-                    {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                    {warnIcon} Missing demo `{name}` {warnIcon}
-                  </div>
-                );
-              }
-
-              return (
-                <Demo
-                  key={index}
-                  demo={{
-                    raw: demo.raw,
-                    js: requireDemo(demo.module).default,
-                    rawTS: demo.rawTS,
-                    tsx: demo.moduleTS ? requireDemo(demo.moduleTS).default : null,
-                  }}
-                  disableAd={disableAd}
-                  demoOptions={renderedMarkdownOrDemo}
-                  githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
-                />
-              );
-            })}
-            <NoSsr>
-              <MarkdownDocsFooter />
-            </NoSsr>
-          </AppContainer>
-        </div>
-        {disableToc ? null : <AppTableOfContents items={toc} />}
-      </AdManager>
-    </AppFrame>
-  );
-}
-
-MarkdownDocs.propTypes = {
-  classes: PropTypes.object.isRequired,
-  demos: PropTypes.object,
-  disableAd: PropTypes.bool,
-  disableToc: PropTypes.bool,
-  docs: PropTypes.object.isRequired,
-  requireDemo: PropTypes.func,
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  MarkdownDocs.propTypes = exactProp(MarkdownDocs.propTypes);
-}
-
-export default withStyles(styles)(MarkdownDocs);
diff --git a/docs/src/modules/components/TopLayoutApi.js b/docs/src/modules/components/TopLayoutApi.js
new file mode 100644
index 00000000000000..db68310cc2153b
--- /dev/null
+++ b/docs/src/modules/components/TopLayoutApi.js
@@ -0,0 +1,340 @@
+/* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { exactProp } from '@material-ui/utils';
+import Typography from '@material-ui/core/Typography';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
+import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+
+function PropsTable(props) {
+  const { componentProps, propDescriptions } = props;
+  const t = useTranslate();
+  const userLanguage = 'en';
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th align="left">{t('api-docs.name')}</th>
+          <th align="left">{t('api-docs.type')}</th>
+          <th align="left">{t('api-docs.default')}</th>
+          <th align="left">{t('api-docs.description')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(componentProps).map(([propName, propData]) => {
+          const typeDescription = propData.type.description || propData.type.name;
+          const propDefault = propData.default || (propData.type.name === 'bool' && 'false');
+          return (
+            propData.description !== '@ignore' && (
+              <tr key={propName}>
+                <td align="left">
+                  <span className={clsx('prop-name', propData.required ? 'required' : null)}>
+                    {propName}
+                    {propData.required ? <sup>*</sup> : null}
+                  </span>
+                </td>
+                <td align="left">
+                  {typeDescription.length > 20 ? (
+                    <details className="prop-type">
+                      <summary>{propData.type.name}</summary>
+                      <span dangerouslySetInnerHTML={{ __html: typeDescription }} />
+                    </details>
+                  ) : (
+                    <span
+                      className="prop-type"
+                      dangerouslySetInnerHTML={{ __html: typeDescription }}
+                    />
+                  )}
+                </td>
+                <td align="left">
+                  {propDefault && <span className="prop-default">{propDefault}</span>}
+                </td>
+                <td
+                  align="left"
+                  dangerouslySetInnerHTML={{
+                    __html: propDescriptions[userLanguage][propName] || '',
+                  }}
+                />
+              </tr>
+            )
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+PropsTable.propTypes = {
+  componentProps: PropTypes.object.isRequired,
+  propDescriptions: PropTypes.object.isRequired,
+};
+
+function ClassesTable(props) {
+  const { componentName, componentStyles, classDescriptions } = props;
+  const t = useTranslate();
+  const userLanguage = 'en';
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th align="left">{t('api-docs.ruleName')}</th>
+          <th align="left">{t('api-docs.globalClass')}</th>
+          <th align="left">{t('api-docs.description')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {componentStyles.classes.map((className) => (
+          <tr key={className}>
+            <td align="left">
+              <span className="prop-name">{className}</span>
+            </td>
+            <td align="left">
+              <span className="prop-name">
+                .{componentStyles.globalClasses[className] || `Mui${componentName}-${className}`}
+              </span>
+            </td>
+            <td
+              align="left"
+              dangerouslySetInnerHTML={{
+                __html:
+                  classDescriptions[userLanguage][className] &&
+                  classDescriptions[userLanguage][className].description.replace(
+                    /{{conditions}}/,
+                    classDescriptions[userLanguage][className].conditions,
+                  ),
+              }}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+ClassesTable.propTypes = {
+  classDescriptions: PropTypes.object.isRequired,
+  componentName: PropTypes.string.isRequired,
+  componentStyles: PropTypes.object.isRequired,
+};
+
+function getTransaltedHeader(t, header) {
+  const translations = {
+    import: t('api-docs.import'),
+    props: t('api-docs.props'),
+    inheritance: t('api-docs.inheritance'),
+    demos: t('api-docs.demos'),
+    css: 'CSS',
+  };
+
+  return translations[header] || header;
+}
+
+function Heading(props) {
+  const { hash, level: Level = 'h2' } = props;
+  const t = useTranslate();
+
+  return (
+    <Level>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */}
+      <a className="anchor-link" id={hash} />
+      {getTransaltedHeader(t, hash)}
+      <a className="anchor-link-style" aria-hidden="true" aria-label="anchor" href={`#${hash}`}>
+        <svg>
+          <use xlinkHref="#anchor-link-icon" />
+        </svg>
+      </a>
+    </Level>
+  );
+}
+
+Heading.propTypes = {
+  hash: PropTypes.string.isRequired,
+  level: PropTypes.string,
+};
+
+function ApiDocs(props) {
+  const { pageContent } = props;
+  const t = useTranslate();
+  const userLanguage = 'en';
+  const {
+    classDescriptions,
+    componentDescription,
+    demos,
+    filename,
+    forwardsRefTo,
+    inheritance,
+    name: componentName,
+    propDescriptions,
+    props: componentProps,
+    spread,
+    styledComponent,
+    styles: componentStyles,
+  } = pageContent;
+  const description = t('api-docs.pageDescription').replace(/{{name}}/, componentName);
+
+  const source = filename
+    .replace(
+      /\/packages\/material-ui(-(.+?))?\/src/,
+      (match, dash, pkg) => `@material-ui/${pkg || 'core'}`,
+    )
+    // convert things like `/Table/Table.js` to ``
+    .replace(/\/([^/]+)\/\1\.(js|tsx)$/, '');
+
+  const sections = [
+    'import',
+    componentStyles.name && 'component-name',
+    'props',
+    componentStyles.classes && 'css',
+    'demos',
+  ];
+
+  const toc = [];
+  sections.forEach((sectionName) => {
+    if (sectionName) {
+      toc.push({
+        text: getTransaltedHeader(t, sectionName),
+        hash: sectionName,
+        children: [
+          ...(sectionName === 'props' && inheritance
+            ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }]
+            : []),
+        ],
+      });
+    }
+  });
+
+  // The `ref` is forwarded to the root element.
+  let refHint = t('api-docs.refRootElement');
+  if (forwardsRefTo == null) {
+    // The component cannot hold a ref.
+    refHint = t('api-docs.refNotHeld');
+  }
+
+  let spreadHint = '';
+  if (spread) {
+    // Any other props supplied will be provided to the root element ({{spreadHintElement}}).
+    spreadHint = t('api-docs.spreadHint').replace(
+      /{{spreadHintElement}}/,
+      inheritance
+        ? `<a href="${inheritance.pathname}">${inheritance.component}</a>`
+        : t('api-docs.nativeElement'),
+    );
+  }
+
+  let inheritanceSuffix = '';
+  if (inheritance && inheritance.component === 'Transition') {
+    inheritanceSuffix = t('api-docs.inheritanceSuffixTransition');
+  }
+
+  return (
+    <AppLayoutDocs
+      description={description}
+      disableAd={false}
+      disableToc={false}
+      location={filename}
+      title={`${componentName} API – Material-UI`}
+      toc={toc}
+    >
+      <MarkdownElement>
+        <h1>{componentName} API</h1>
+        <Typography variant="h5" component="p" className="description" gutterBottom>
+          {description}
+        </Typography>
+        <Heading hash="import" />
+        <HighlightedCode
+          code={`
+import ${componentName} from '${source}/${componentName}';
+// ${t('or')}
+import { ${componentName} } from '${source}';`}
+          language="jsx"
+        />
+        <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
+        {componentDescription[userLanguage] && (
+          <span dangerouslySetInnerHTML={{ __html: componentDescription[userLanguage] }} />
+        )}
+        {componentStyles.name && (
+          <React.Fragment>
+            <Heading hash="component-name" />
+            <span
+              dangerouslySetInnerHTML={{
+                __html: t('api-docs.styleOverrides').replace(
+                  /{{styles\.name}}/,
+                  `Mui${componentName}`,
+                ),
+              }}
+            />
+          </React.Fragment>
+        )}
+        <Heading hash="props" />
+        <PropsTable componentProps={componentProps} propDescriptions={propDescriptions} />
+        <br />
+        {refHint}
+        <br />
+        <span dangerouslySetInnerHTML={{ __html: spreadHint }} />
+        {inheritance && (
+          <React.Fragment>
+            <Heading hash="inheritance" level="h3" />
+            <span
+              dangerouslySetInnerHTML={{
+                __html: t('api-docs.inheritanceDescription')
+                  .replace(/{{component}}/, inheritance.component)
+                  .replace(/{{pathname}}/, inheritance.pathname)
+                  .replace(/{{suffix}}/, inheritanceSuffix)
+                  .replace(/{{componentName}}/, componentName),
+              }}
+            />
+          </React.Fragment>
+        )}
+        {componentStyles.classes ? (
+          <React.Fragment>
+            <Heading hash="css" />
+            <ClassesTable
+              componentName={componentName}
+              componentStyles={componentStyles}
+              classDescriptions={classDescriptions}
+            />
+            <br />
+            <span dangerouslySetInnerHTML={{ __html: t('api-docs.overrideStyles') }} />
+            {styledComponent ? (
+              <span
+                dangerouslySetInnerHTML={{ __html: t('api-docs.overrideStylesStyledComponent') }}
+              />
+            ) : (
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t('api-docs.overrideStylesJss').replace(
+                    /{{URL}}/,
+                    `${SOURCE_CODE_ROOT_URL}${filename}`,
+                  ),
+                }}
+              />
+            )}
+          </React.Fragment>
+        ) : null}
+        <Heading hash="demos" />
+        <span dangerouslySetInnerHTML={{ __html: demos }} />
+      </MarkdownElement>
+      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
+        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+        </symbol>
+      </svg>
+    </AppLayoutDocs>
+  );
+}
+
+ApiDocs.propTypes = {
+  pageContent: PropTypes.object.isRequired,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  ApiDocs.propTypes = exactProp(ApiDocs.propTypes);
+}
+
+export default ApiDocs;
diff --git a/docs/src/modules/components/TopLayoutDocs.js b/docs/src/modules/components/TopLayoutDocs.js
new file mode 100644
index 00000000000000..57cc9836def797
--- /dev/null
+++ b/docs/src/modules/components/TopLayoutDocs.js
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+import Demo from 'docs/src/modules/components/Demo';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { exactProp } from '@material-ui/utils';
+import ComponentLinkHeader from 'docs/src/modules/components/ComponentLinkHeader';
+import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
+
+const markdownComponents = {
+  'modules/components/ComponentLinkHeader.js': ComponentLinkHeader,
+};
+function TopLayoutDocs(props) {
+  const { disableAd = false, disableToc = false, demos = {}, docs, requireDemo } = props;
+
+  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const t = useSelector((state) => state.options.t);
+
+  const { description, location, rendered, title, toc, headers } = docs[userLanguage] || docs.en;
+
+  return (
+    <AppLayoutDocs
+      description={description}
+      disableAd={disableAd}
+      disableToc={disableToc}
+      location={location}
+      title={title}
+      toc={toc}
+    >
+      {rendered.map((renderedMarkdownOrDemo, index) => {
+        if (typeof renderedMarkdownOrDemo === 'string') {
+          return <MarkdownElement key={index} renderedMarkdown={renderedMarkdownOrDemo} />;
+        }
+
+        if (renderedMarkdownOrDemo.component) {
+          const Component = markdownComponents[renderedMarkdownOrDemo.component];
+          return <Component key={index} headers={headers} options={renderedMarkdownOrDemo} />;
+        }
+
+        const name = renderedMarkdownOrDemo.demo;
+        const demo = demos?.[name];
+        if (demo === undefined) {
+          const errorMessage = [
+            `Missing demo: ${name}. You can use one of the following:`,
+            Object.keys(demos),
+          ].join('\n');
+
+          if (userLanguage === 'en') {
+            throw new Error(errorMessage);
+          }
+
+          if (process.env.NODE_ENV !== 'production') {
+            console.error(errorMessage);
+          }
+
+          const warnIcon = (
+            <span role="img" aria-label={t('emojiWarning')}>
+              ⚠️
+            </span>
+          );
+          return (
+            <div key={index}>
+              {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+              {warnIcon} Missing demo `{name}` {warnIcon}
+            </div>
+          );
+        }
+
+        return (
+          <Demo
+            key={index}
+            demo={{
+              raw: demo.raw,
+              js: requireDemo(demo.module).default,
+              rawTS: demo.rawTS,
+              tsx: demo.moduleTS ? requireDemo(demo.moduleTS).default : null,
+            }}
+            disableAd={disableAd}
+            demoOptions={renderedMarkdownOrDemo}
+            githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
+          />
+        );
+      })}
+    </AppLayoutDocs>
+  );
+}
+
+TopLayoutDocs.propTypes = {
+  demos: PropTypes.object,
+  disableAd: PropTypes.bool,
+  disableToc: PropTypes.bool,
+  docs: PropTypes.object.isRequired,
+  requireDemo: PropTypes.func,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  TopLayoutDocs.propTypes = exactProp(TopLayoutDocs.propTypes);
+}
+
+export default TopLayoutDocs;
diff --git a/docs/src/pages.ts b/docs/src/pages.ts
index ab5e0514a7be41..1d5f2039052a50 100644
--- a/docs/src/pages.ts
+++ b/docs/src/pages.ts
@@ -285,6 +285,7 @@ const pages: MuiPage[] = [
       { pathname: '/discover-more/languages' },
     ],
   },
+  { pathname: '/performance/api', displayNav: false }, // TODO remove
   { pathname: '/versions', displayNav: false },
   { pathname: '/', displayNav: false, disableDrawer: true },
   { pathname: 'https://medium.com/material-ui', title: 'Blog' },
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 0619dcc3f87322..f617cf0884a37a 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -1,4 +1,27 @@
 {
+  "api-docs": {
+    "importDifference": "You can learn about the difference by <a href=\"/guides/minimizing-bundle-size/\">reading this guide on minimizing bundle size</a>.",
+    "inheritanceDescription": "While not explicitly documented above, the props of the <a href=\"{{pathname}}\">{{component}}</a> component{{suffix}} are also available on {{componentName}}. You can take advantage of this to <a href=\"/guides/api/#spread\">target nested components</a>.",
+    "inheritanceSuffixTransition": " from react-transition-group",
+    "overrideStyles": "You can override the style of the component using one of these customization options:\n",
+    "overrideStylesJss": "<ul>\n<li>With a rule name of the <a href=\"/customization/components/#overriding-styles-with-classes\">`classes` object prop</a>.</li>\n<li>With a <a href=\"/customization/components/#overriding-styles-with-global-class-names\">global class name</a>.</li>\n<li>With a theme and an <a href=\"/customization/globals/#css\">`overrides` property</a>.</li>\n</ul>\nIf that isn't sufficient, you can check the <a href=\"{{URL}}\">implementation of the component</a> for more detail.",
+    "overrideStylesStyledComponent": "<ul>\n<li>With a <a href=\"/guides/interoperability/#global-css\">global class name</a>.</li>\n<li>With a rule name as part of the component's <a href=\"/customization/components/#global-theme-override\">`styleOverrides` property</a> in a custom theme.</li>\n</ul>",
+    "pageDescription": "API documentation for the React {{name}} component. Learn about the available props, and the CSS API.",
+    "spreadHint": "Any other props supplied will be provided to the root element ({{spreadHintElement}}).",
+    "styleOverrides": "The name <code>{{pageStyles.name}}</code> can be used when providing <a href=\"/customization/globals/#default-props\">default props</a> or <a href=\"/customization/globals/#css\">style overrides</a> in the theme.",
+    "import": "Import",
+    "props": "Props",
+    "inheritance": "Inheritance",
+    "demos": "Demos",
+    "refRootElement": "The `ref` is forwarded to the root element.",
+    "refNotHeld": "The component cannot hold a ref.",
+    "name": "Name",
+    "type": "Type",
+    "ruleName": "Rule name",
+    "description": "Description",
+    "globalClass": "Global class",
+    "nativeElement": "native element"
+  },
   "adblock": "If you don't mind tech related ads (no tracking or remarketing), and want to keep us running, please whitelist Material-UI in your blocker.",
   "albumDescr": "A responsive album / gallery page layout with a hero unit and footer.",
   "albumTitle": "Album",
@@ -64,6 +87,7 @@
   "mainNavigation": "Main navigation",
   "newest": "Newest",
   "openDrawer": "Open main navigation",
+  "or": "or",
   "pageTOC": "Page table of contents",
   "praise": "Praise for Material-UI",
   "praiseDescr": "Here's what some of our users are saying.",