diff --git a/lib/core/App.js b/lib/core/App.js
index 1de9335253..4fabf192dc 100644
--- a/lib/core/App.js
+++ b/lib/core/App.js
@@ -2,8 +2,14 @@ import {renderRoutes} from 'react-router-config';
 
 import routes from '@generated/routes'; // eslint-disable-line
 import docsMetadatas from '@generated/docsMetadatas'; // eslint-disable-line
+import docsSidebars from '@generated/docsSidebars'; // eslint-disable-line
 import pagesMetadatas from '@generated/pagesMetadatas'; // eslint-disable-line
 import siteConfig from '@generated/siteConfig'; //eslint-disable-line
 
 export default () =>
-  renderRoutes(routes, {docsMetadatas, pagesMetadatas, siteConfig});
+  renderRoutes(routes, {
+    docsMetadatas,
+    docsSidebars,
+    pagesMetadatas,
+    siteConfig
+  });
diff --git a/lib/load/docs/metadata.js b/lib/load/docs/metadata.js
index a4d13d1eb3..9a8c2687dc 100644
--- a/lib/load/docs/metadata.js
+++ b/lib/load/docs/metadata.js
@@ -144,7 +144,7 @@ module.exports = async function processMetadata(
     metadata.id = `version-${version}-${metadata.id}`;
   }
 
-  /* save localized id before adding language on it*/
+  /* save localized id before adding language on it */
   metadata.localized_id = metadata.id;
 
   /* if language */
diff --git a/lib/load/index.js b/lib/load/index.js
index 9be4bbc8a2..2dd0bd4ff3 100644
--- a/lib/load/index.js
+++ b/lib/load/index.js
@@ -20,11 +20,20 @@ module.exports = async function load(siteDir) {
 
   // docs
   const docsDir = path.resolve(siteDir, '..', siteConfig.customDocsPath);
-  const {docsMetadatas, docsSidebars} = await loadDocs({siteDir, docsDir, env, siteConfig});
+  const {docsMetadatas, docsSidebars} = await loadDocs({
+    siteDir,
+    docsDir,
+    env,
+    siteConfig
+  });
   await generate(
     'docsMetadatas.js',
     `export default ${JSON.stringify(docsMetadatas, null, 2)};`
   );
+  await generate(
+    'docsSidebars.js',
+    `export default ${JSON.stringify(docsSidebars, null, 2)};`
+  );
 
   /* Create source to metadata mapping */
   const sourceToMetadata = {};
diff --git a/lib/theme/Docs/index.js b/lib/theme/Docs/index.js
index 6b9a4eec8a..db1b7da79e 100644
--- a/lib/theme/Docs/index.js
+++ b/lib/theme/Docs/index.js
@@ -6,13 +6,55 @@ import styles from './styles.css';
 import Layout from '@theme/Layout'; // eslint-disable-line
 
 export default class Docs extends React.Component {
+  renderSidebar(metadata, docsSidebars, docsMetadatas) {
+    const {sidebar, language, id: thisID} = metadata;
+    if (!sidebar || !docsSidebars) {
+      return null;
+    }
+    const thisSidebar = docsSidebars[sidebar];
+    return (
+      thisSidebar &&
+      Object.keys(thisSidebar).map(categoryName => {
+        return (
+          <div className="navGroup" key={categoryName}>
+            <h3 className="navGroupCategoryTitle">{categoryName}</h3>
+            <ul>
+              {thisSidebar[categoryName].map(rawLinkID => {
+                const linkID = (language ? `${language}-` : '') + rawLinkID;
+                const linkMetadata = docsMetadatas[linkID];
+                const linkClassName =
+                  linkID === thisID ? 'navListItemActive' : 'navListItem';
+                return (
+                  linkMetadata && (
+                    <li className={linkClassName} key={linkID}>
+                      <Link className="navItem" to={linkMetadata.permalink}>
+                        {linkMetadata.sidebar_label || linkMetadata.title}
+                      </Link>
+                    </li>
+                  )
+                );
+              })}
+            </ul>
+          </div>
+        );
+      })
+    );
+  }
+
   render() {
-    const {route, siteConfig, docsMetadatas, metadata} = this.props;
+    const {
+      route,
+      siteConfig,
+      docsMetadatas,
+      docsSidebars,
+      metadata
+    } = this.props;
     return (
       <Layout {...this.props}>
         <Helmet>
           <title>{(metadata && metadata.title) || siteConfig.title}</title>
         </Helmet>
+        <div>{this.renderSidebar(metadata, docsSidebars, docsMetadatas)}</div>
         <div>
           {metadata.previous &&
             docsMetadatas[metadata.previous] && (
@@ -20,8 +62,7 @@ export default class Docs extends React.Component {
                 <span>← {metadata.previous_title}</span>
               </Link>
             )}
-        </div>
-        <div>
+          {' ⚫️ '}
           {metadata.next &&
             docsMetadatas[metadata.next] && (
               <Link to={docsMetadatas[metadata.next].permalink}>