diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index fe18a7ceac..5c1e0834e7 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -139,6 +139,10 @@ An option to disable showing the title in the header next to the header icon. Ex
 
 An option to disable showing the tagline in the title of main pages. Exclude this field to keep page titles as `Title • Tagline`. Set to `true` to make page titles just `Title`.
 
+#### `docsSideNavCollapsible` [boolean]
+
+Set this to `true` if you want to be able to expand/collapse the links and subcategories in the sidebar.
+
 #### `editUrl` [string]
 
 URL for editing docs, usage example: `editUrl + 'en/doc1.md'`. If this field is omitted, there will be no "Edit this Doc" button for each document.
diff --git a/docs/guides-navigation.md b/docs/guides-navigation.md
index ff8f2e3199..d35b9b25fa 100644
--- a/docs/guides-navigation.md
+++ b/docs/guides-navigation.md
@@ -272,3 +272,14 @@ We support secondary on-page navigation so you can more easily see the topics as
 ```
 
 Currently, `'separate'` is the only option available for this field. This provides a separate navigation on the right side of the page.
+
+## Collapsible Categories
+
+For sites with a sizable amount of content, we support the option to expand/collapse the links and subcategories under categories. To enable this feature, set the `docsSideNavCollapsible` site configuration [option](api-site-config.md#optional-fields) in `siteConfig.js` to true.
+
+```js
+{
+  docsSideNavCollapsible: true,
+  ...
+}
+```
diff --git a/v1/lib/core/nav/SideNav.js b/v1/lib/core/nav/SideNav.js
index cfe83e8055..21cdb75597 100644
--- a/v1/lib/core/nav/SideNav.js
+++ b/v1/lib/core/nav/SideNav.js
@@ -61,25 +61,38 @@ class SideNav extends React.Component {
     return null;
   }
 
-  renderCategory = categoryItem => (
-    <div className="navGroup" key={categoryItem.title}>
-      <h3 className="navGroupCategoryTitle">
-        {this.getLocalizedCategoryString(categoryItem.title)}
-      </h3>
-      <ul>
-        {categoryItem.children.map(item => {
-          switch (item.type) {
-            case 'LINK':
-              return this.renderItemLink(item);
-            case 'SUBCATEGORY':
-              return this.renderSubcategory(item);
-            default:
-              return null;
-          }
-        })}
-      </ul>
-    </div>
-  );
+  renderCategory = categoryItem => {
+    let ulClassName = '';
+    let categoryClassName = 'navGroupCategoryTitle';
+    let arrow;
+
+    if (siteConfig.docsSideNavCollapsible) {
+      categoryClassName += ' collapsible';
+      ulClassName = 'hide';
+      arrow = <span className="arrow">&#8963;</span>;
+    }
+
+    return (
+      <div className="navGroup" key={categoryItem.title}>
+        <h3 className={categoryClassName}>
+          {this.getLocalizedCategoryString(categoryItem.title)}
+          {arrow}
+        </h3>
+        <ul className={ulClassName}>
+          {categoryItem.children.map(item => {
+            switch (item.type) {
+              case 'LINK':
+                return this.renderItemLink(item);
+              case 'SUBCATEGORY':
+                return this.renderSubcategory(item);
+              default:
+                return null;
+            }
+          })}
+        </ul>
+      </div>
+    );
+  };
 
   renderSubcategory = subcategoryItem => (
     <div className="navGroup subNavGroup" key={subcategoryItem.title}>
@@ -133,6 +146,29 @@ class SideNav extends React.Component {
         <script
           dangerouslySetInnerHTML={{
             __html: `
+            var coll = document.getElementsByClassName('collapsible');
+            var checkActiveCategory = true;
+            for (var i = 0; i < coll.length; i++) {
+              var links = coll[i].nextElementSibling.getElementsByTagName('*');
+              if (checkActiveCategory){
+                for (var j = 0; j < links.length; j++) {
+                  if (links[j].classList.contains('navListItemActive')){
+                    coll[i].nextElementSibling.classList.toggle('hide');
+                    coll[i].childNodes[1].classList.toggle('rotate');
+                    checkActiveCategory = false;
+                    break;
+                  }
+                }
+              }
+
+              coll[i].addEventListener('click', function() {
+                var arrow = this.childNodes[1];
+                arrow.classList.toggle('rotate');
+                var content = this.nextElementSibling;
+                content.classList.toggle('hide');
+              });
+            }
+
             document.addEventListener('DOMContentLoaded', function() {
               createToggler('#navToggler', '#docsNav', 'docsSliderActive');
               createToggler('#tocToggler', 'body', 'tocActive');
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
index e0e5d963be..6761514c95 100644
--- a/v1/lib/static/css/main.css
+++ b/v1/lib/static/css/main.css
@@ -1596,6 +1596,22 @@ input::placeholder {
 /* End of Docs Navigation */
 
 /* Start of Docs Sidebar */
+.hide {
+  display: none;
+}
+
+.collapsible .arrow {
+  cursor: pointer;
+  float: right;
+  margin-right: 5px;
+  transform: rotate(90deg);
+  transition: transform 200ms linear;
+}
+
+.collapsible .arrow.rotate {
+  transform: rotate(180deg);
+}
+
 @media only screen and (max-width: 1023px) {
   .docsNavContainer {
     background: #fff;
diff --git a/v1/website/siteConfig.js b/v1/website/siteConfig.js
index 432414883d..d94166d8ee 100644
--- a/v1/website/siteConfig.js
+++ b/v1/website/siteConfig.js
@@ -72,6 +72,7 @@ const siteConfig = {
   enableUpdateTime: true,
   enableUpdateBy: true,
   customDocsPath: '../docs',
+  docsSideNavCollapsible: true,
 };
 
 module.exports = siteConfig;