diff --git a/5layers.yml b/5layers.yml
index f9ff9fe434..5767e91b47 100644
--- a/5layers.yml
+++ b/5layers.yml
@@ -205,13 +205,24 @@ pages:
     -   name: References
         funnel: Docs
         doc_type: References
+        template: template-landing-children.html
         html: landing-references.html
         targets:
             - local
 
+    -   name: References
+        funnel: Docs
+        doc_type: References
+        supercategory: rippled API
+        template: template-landing-children.html
+        html: reference-rippled-api.html
+        targets:
+            - local
+
     -   name: rippled API Public Methods
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         html: reference-rippled-public.html
         template: template-landing-children.html
@@ -221,6 +232,7 @@ pages:
     -   name: Ledger Methods
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Ledger Methods
         template: template-landing-children.html
@@ -231,6 +243,7 @@ pages:
     -   md: rippled-api-methods/ledger_closed.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Ledger Methods
         targets:
@@ -239,6 +252,7 @@ pages:
     -   md: rippled-api-methods/ledger_current.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Ledger Methods
         targets:
@@ -247,6 +261,7 @@ pages:
     -   md: rippled-api-methods/ledger_data.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Ledger Methods
         targets:
@@ -255,6 +270,7 @@ pages:
     -   name: Account Methods
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Account Methods
         template: template-landing-children.html
@@ -265,6 +281,7 @@ pages:
     -   md: rippled-api-methods/account_channels.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Account Methods
         targets:
@@ -273,6 +290,7 @@ pages:
     -   md: rippled-api-methods/account_info.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Account Methods
         targets:
@@ -281,6 +299,7 @@ pages:
     -   name: Transaction Methods
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Public Methods
         subcategory: Transaction Methods
         template: template-landing-children.html
@@ -291,6 +310,7 @@ pages:
     -   name: rippled API Admin Methods
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Admin Methods
         html: reference-rippled-admin.html
         template: template-landing-children.html
@@ -300,6 +320,7 @@ pages:
     -   md: rippled-api-methods/ledger_accept.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: rippled API Admin Methods
         subcategory: Server Control Methods
         targets:
@@ -308,6 +329,7 @@ pages:
     -   md: reference-transaction-format.md
         funnel: Docs
         doc_type: References
+        supercategory: rippled API
         category: Transaction Format
         targets:
             - local
@@ -319,6 +341,18 @@ pages:
         targets:
             - local
 
+    -   name: RippleAPI Reference # name is required for remote-sourced files
+        md: https://raw.githubusercontent.com/ripple/ripple-lib/0.21.0/docs/index.md
+        html: reference-rippleapi.html
+        funnel: Docs
+        doc_type: References
+        category: RippleAPI for JavaScript
+        filters:
+            - remove_doctoc
+            - add_version
+        targets:
+            - local
+
     -   md: use-cases.md
         funnel: Use Cases
         filters:
diff --git a/tool/template-sidebar_nav.html b/tool/template-sidebar_nav.html
index 3c0a5ac311..a1b8892e15 100644
--- a/tool/template-sidebar_nav.html
+++ b/tool/template-sidebar_nav.html
@@ -1,102 +1,242 @@
-<div class="guide_toc">
-  {% if currentpage.doc_type is defined %}
-  <div class="sidenav_parent">
-    <a href="{{ (pages|selectattr('doc_type', 'equalto', currentpage.doc_type)|first).html }}">{{ currentpage.doc_type }}</a>
-  </div>
+<div class="tree_nav">
+
+  <!--{############# Parent page link ###############################}-->
+  {% if currentpage.supercategory is defined %}
+    <div class="sidenav_parent">
+      {% if currentpage == (pages|selectattr('supercategory', 'equalto', currentpage.supercategory)|first) %}
+      <a class="active" href="{{ currentpage.html }}">{{ currentpage.supercategory }}</a>
+      {% else %}
+      <a href="{{ (pages|selectattr('supercategory', 'equalto', currentpage.supercategory)|first).html }}">{{ currentpage.supercategory }}</a>
+      {% endif %}
+    </div>
+  {% elif currentpage.doc_type is defined %}
+    <div class="sidenav_parent">
+      <a href="{{ (pages|selectattr('doc_type', 'equalto', currentpage.doc_type)|first).html }}">{{ currentpage.doc_type }}</a>
+    </div>
   {% elif currentpage.funnel is defined %}
-  <div class="sidenav_parent">
-    {% if currentpage == (pages|selectattr('funnel', 'equalto', currentpage.funnel)|first) %}
-    <a class="active" href="{{ currentpage.html }}">{{ currentpage.funnel }}</a>
-    {% else %}
-    <a href="{{ (pages|selectattr('funnel', 'equalto', currentpage.funnel)|first).html }}">{{ currentpage.funnel }}</a>
-    {% endif %}
-  </div>
+    <div class="sidenav_parent">
+      {% if currentpage == (pages|selectattr('funnel', 'equalto', currentpage.funnel)|first) %}
+      <a class="active" href="{{ currentpage.html }}">{{ currentpage.funnel }}</a>
+      {% else %}
+      <a href="{{ (pages|selectattr('funnel', 'equalto', currentpage.funnel)|first).html }}">{{ currentpage.funnel }}</a>
+      {% endif %}
+    </div>
   {% endif %}
 
-  {% if pages|selectattr("funnel", "equalto", currentpage.funnel)|selectattr("category", "defined")|list|length %}
-  <div id="sidenav" role="tablist" aria-multiselectable="true">
-    {% for cat in categories %}
-      {% set catpages = pages|selectattr("category", "equalto", cat)|list %}
-      {% if currentpage.funnel is defined %}
-        {% set catpages = catpages|selectattr("funnel", "equalto", currentpage.funnel)|list %}
-      {% endif %}
-      {% if currentpage.doc_type is defined %}
-        {% set catpages = catpages|selectattr("doc_type", "equalto", currentpage.doc_type)|list %}
-      {% endif %}
-    {% if catpages|length %}
-    <div class="card{% if currentpage.category == cat %} active{% endif %}">
-      <div class="card-header" role="tab" id="sidenav_cat_head_{{loop.index}}">
-        <h5 class="card-title">
-        {% if catpages|length > 1 %}
-        <a class="{% if currentpage.category != cat %}collapsed {% endif %}sidenav_cat_toggler" role="button" data-toggle="collapse" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">&nbsp;</a>
-        {% endif %}
-        <a class="sidenav_cat_title{% if currentpage == (pages|selectattr('category', 'equalto', cat)|first) %} active{% elif currentpage.category == cat %} active-parent{% endif %}" href="{{ (pages|selectattr('category', 'equalto', cat)|first).html }}">{{ cat }}</a>
-        </h5>
-      </div><!-- /.card-header -->
+  <!--{############# Sidebar links ###############################}-->
 
-      <div id="sidenav_collapse_{{loop.index}}" class="collapse{% if currentpage.category == cat %} show{% endif %}" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
+  {% if not pages|selectattr("funnel", "equalto", currentpage.funnel)|selectattr("category", "defined")|list|length %}
+    <!--{##### Case: no funnel categories, simple one-category sidebar ####}-->
+    {% set funnelpages = pages|selectattr("funnel", "equalto", currentpage.funnel)|list %}
+    <div id="sidenav" aria-multiselectable="true">
+      <div class="card active">
         <div class="card-body">
           <ul class="sidebar_pagelist">
-          {% set printed_subcategories = [] %}
-          {% for page in catpages %}
-            {% if loop.index != 1 %}{# Skip the first element since it's linked by the category header #}
-            {% if page.subcategory is undefined %}
-              {% if page == currentpage %}
-              <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
-              {% else %}
-              <li><a class="nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
-              {% endif %}
-            {% elif page.subcategory not in printed_subcategories %}
-              {% if page == currentpage %}
-              <li><a class="subcat-title active" href="#main_content_body">{{ page.name }}</a></li>
-              {% elif page.subcategory == currentpage.subcategory %}
-              <li><a class="subcat-title active-parent" href="{{ page.html }}">{{ page.name }}</a></li>
-              {% else %}
-              <li><a class="subcat-title" href="{{ page.html }}">{{ page.name }}</a></li>
-              {% endif %}
-
-              {% for subpage in catpages|selectattr('subcategory', 'equalto', page.subcategory) %}
-                {% if subpage != page %}
-                {% if subpage == currentpage %}
-                <li><a class="active subpage" href="#main_content_body">{{ subpage.name }}</a></li>
-                {% else %}
-                <li><a class="subpage" href="{{ subpage.html }}">{{ subpage.name }}</a></li>
-                {% endif %}
-                {% endif %}
-              {% endfor %}
-              {% set _ = printed_subcategories.append(page.subcategory) %}
-
-            {% endif %}
+          {% for page in funnelpages %}
+            {% if loop.index == 1 %}{# Skip the first element since it's linked by the funnel header #}
+            {% elif page == currentpage %}
+            <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+            {% else %}
+            <li><a class="nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
             {% endif %}
           {% endfor %}
-
           </ul>
         </div><!-- /.card-body -->
-      </div><!-- /#sidenav_collapse{{loop.index}} -->
+      </div><!-- /.card -->
+    </div><!-- /#sidenav -->
 
-    </div><!-- /.panel -->
-    {% endif %}
-    {% endfor %}
-  </div><!-- /#sidenav -->
+  {% elif currentpage.supercategory is defined %}
+    <!--{# Case: in a supercategory, show cards for that supercategory's categories #}-->
+    <div id="sidenav" role="tablist" aria-multiselectable="true">
+      {% for cat in categories %}
+        {% set catpages = pages|selectattr("category", "equalto", cat)|list %}
+        {% if currentpage.funnel is defined %}
+          {% set catpages = catpages|selectattr("funnel", "equalto", currentpage.funnel)|list %}
+        {% endif %}
+        {% if currentpage.doc_type is defined %}
+          {% set catpages = catpages|selectattr("doc_type", "equalto", currentpage.doc_type)|list %}
+        {% endif %}
+        {% set catpages = catpages|selectattr("supercategory", "equalto", currentpage.supercategory)|list %}
+        {% if catpages|length %}
+          {% set cat_parent = pages|selectattr('category', 'equalto', cat)|first %}
+            <div class="card{% if currentpage.category == cat %} active{% endif %}">
+              <div class="card-header" role="tab" id="sidenav_cat_head_{{loop.index}}">
+                <h5 class="card-title">
+                {% if catpages|length > 1 %}
+                <a class="{% if currentpage.category != cat %}collapsed {% endif %}sidenav_cat_toggler" role="button" data-toggle="collapse" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">&nbsp;</a>
+                {% endif %}
+                <a class="sidenav_cat_title{% if currentpage == (cat_parent) %} active{% elif currentpage.category == cat %} active-parent{% endif %}" href="{{ cat_parent.html }}">{{ cat }}</a>
+                </h5>
+              </div><!-- /.card-header -->
+
+              <div id="sidenav_collapse_{{loop.index}}" class="collapse{% if currentpage.category == cat %} show{% endif %}" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
+                <div class="card-body">
+                  <ul class="sidebar_pagelist">
+                  {% set printed_subcategories = [] %}
+                  {% for page in catpages %}
+                    {% if loop.index != 1 %}{# Skip the first element since it's linked by the category header #}
+                    {% if page.subcategory is undefined %}
+                      {% if page == currentpage %}
+                      <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+                      {% else %}
+                      <li><a class="nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+                      {% endif %}
+                    {% elif page.subcategory not in printed_subcategories %}
+                      {% if page == currentpage %}
+                      <li><a class="subcat-title active" href="#main_content_body">{{ page.name }}</a></li>
+                      {% elif page.subcategory == currentpage.subcategory %}
+                      <li><a class="subcat-title active-parent" href="{{ page.html }}">{{ page.name }}</a></li>
+                      {% else %}
+                      <li><a class="subcat-title" href="{{ page.html }}">{{ page.name }}</a></li>
+                      {% endif %}
+
+                      {% for subpage in catpages|selectattr('subcategory', 'equalto', page.subcategory) %}
+                        {% if subpage != page %}
+                          {% if subpage == currentpage %}
+                          <li><a class="active subpage" href="#main_content_body">{{ subpage.name }}</a></li>
+                          {% else %}
+                          <li><a class="subpage" href="{{ subpage.html }}">{{ subpage.name }}</a></li>
+                          {% endif %}
+                        {% endif %}
+                      {% endfor %}
+                      {% set _ = printed_subcategories.append(page.subcategory) %}
+
+                    {% endif %}
+                    {% endif %}
+                  {% endfor %}
+
+                  </ul>
+                </div><!-- /.card-body -->
+              </div><!-- /#sidenav_collapse{{loop.index}} -->
+
+            </div><!-- /.panel -->
+        {% endif %}
+      {% endfor %}
+    </div><!-- /#sidenav -->
 
   {% else %}
-  {#--- No categories in this funnel --#}
-  {% set funnelpages = pages|selectattr("funnel", "equalto", currentpage.funnel)|list %}
-  <div id="sidenav" aria-multiselectable="true">
-    <div class="card active">
-      <div class="card-body">
-        <ul class="sidebar_pagelist">
-        {% for page in funnelpages %}
-          {% if loop.index == 1 %}{# Skip the first element since it's linked by the funnel header #}
-          {% elif page == currentpage %}
-          <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
-          {% else %}
-          <li><a class="nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+    <!--{##### Case: Not in a supercategory, but siblings might be #}-->
+    {% set sidebar_pagelist = pages|selectattr("funnel", "equalto", currentpage.funnel)|list %}
+    {% if currentpage.doc_type is defined %}
+      {% set sidebar_pagelist = sidebar_pagelist|selectattr("doc_type", "equalto", currentpage.doc_type)|list %}
+    {% endif %}
+    {% set printed_modules = [] %}
+    <div id="sidenav" role="tablist" aria-multiselectable="true">
+    {% for page in sidebar_pagelist %}
+      {% if page.supercategory is defined %}
+        {% if page.supercategory not in printed_modules %}
+          <!--{################# Supercategory Card ####################}-->
+          {% set supercat = page.supercategory %}
+          {% set supercatpages = sidebar_pagelist|selectattr("supercategory", "equalto", page.supercategory)|list %}
+          {% if supercatpages|length %}
+            {% set supercat_parent = supercatpages|first %}
+            {% set _ = printed_modules.append(page.supercategory) %}
+            <div class="card">
+              <div class="card-header" role="tab" id="sidenav_cat_head_{{loop.index}}">
+                <h5 class="card-title">
+                {% if supercatpages|length > 1 %}
+                  <a class="collapsed sidenav_cat_toggler" role="button" data-toggle="collapse" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">&nbsp;</a>
+                {% endif %}
+                  <a class="sidenav_cat_title" href="{{ supercat_parent.html }}">{{ supercat }}</a>
+                </h5>
+              </div><!-- /.card-header -->
+
+              <div id="sidenav_collapse_{{loop.index}}" class="collapse" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
+                <div class="card-body">
+                  <ul class="sidebar_pagelist">
+                  {% set printed_categories = [] %}
+                  {% for subpage in supercatpages %}
+                    {% if loop.index != 1 %}{# Skip the first element since it's linked by the supercategory header #}
+                      {% if subpage.category not in printed_categories %}
+                        <li><a class="subcat-title" href="{{ subpage.html }}">{{ subpage.name }}</a></li>
+
+                        {% set category_members = supercatpages|selectattr('category', 'equalto', subpage.category)|list %}
+                        <!-- DEBUG: category_members is {{ category_members }} -->
+                        {% for subsubpage in category_members %}
+                          {% if subsubpage != subpage and (subsubpage.subcategory is undefined or
+                              subsubpage == category_members|selectattr('subcategory', 'equalto', subsubpage.subcategory)|first) %}
+                            <li><a class="subpage" href="{{ subsubpage.html }}">{{ subsubpage.name }}</a></li>
+                          {% endif %}
+                        {% endfor %}
+                        {% set _ = printed_categories.append(subpage.category) %}
+                      {% endif %}
+
+                    {% endif %}
+                  {% endfor %}
+                  </ul>
+                </div><!-- /.card-body -->
+              </div><!-- /#sidenav_collapse{{loop.index}} -->
+
+            </div><!-- /.card -->
+
           {% endif %}
-        {% endfor %}
-        </ul>
-      </div><!-- /.card-body -->
-    </div><!-- /.panel -->
-  </div><!-- /#sidenav -->
+        {% endif %}
+
+
+
+
+      {% elif page.category is defined and page.category not in printed_modules %}
+        <!--{################# Category Card ####################}-->
+        {% set cat = page.category %}
+        {% set catpages = sidebar_pagelist|selectattr("category", "equalto", page.category)|list %}
+        {% if catpages|length %}
+          {% set cat_parent = catpages|first %}
+          <div class="card{% if currentpage.category == cat %} active{% endif %}">
+            <div class="card-header" role="tab" id="sidenav_cat_head_{{loop.index}}">
+              <h5 class="card-title">
+              {% if catpages|length > 1 %}
+                <a class="{% if currentpage.category != cat %}collapsed {% endif %}sidenav_cat_toggler" role="button" data-toggle="collapse" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">&nbsp;</a>
+              {% endif %}
+                <a class="sidenav_cat_title{% if currentpage == (cat_parent) %} active{% elif currentpage.category == cat %} active-parent{% endif %}" href="{{ cat_parent.html }}">{{ cat }}</a>
+              </h5>
+            </div><!-- /.card-header -->
+
+            <div id="sidenav_collapse_{{loop.index}}" class="collapse{% if currentpage.category == cat %} show{% endif %}" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
+              <div class="card-body">
+                <ul class="sidebar_pagelist">
+                {% set printed_subcategories = [] %}
+                {% for page in catpages %}
+                  {% if loop.index != 1 %}{# Skip the first element since it's linked by the category header #}
+                  {% if page.subcategory is undefined %}
+                    {% if page == currentpage %}
+                    <li><a class="active nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+                    {% else %}
+                    <li><a class="nosubcat-page" href="{{ page.html }}">{{ page.name }}</a></li>
+                    {% endif %}
+                  {% elif page.subcategory not in printed_subcategories %}
+                    {% if page == currentpage %}
+                    <li><a class="subcat-title active" href="#main_content_body">{{ page.name }}</a></li>
+                    {% elif page.subcategory == currentpage.subcategory %}
+                    <li><a class="subcat-title active-parent" href="{{ page.html }}">{{ page.name }}</a></li>
+                    {% else %}
+                    <li><a class="subcat-title" href="{{ page.html }}">{{ page.name }}</a></li>
+                    {% endif %}
+
+                    {% for subpage in catpages|selectattr('subcategory', 'equalto', page.subcategory) %}
+                      {% if subpage != page %}
+                        {% if subpage == currentpage %}
+                        <li><a class="active subpage" href="#main_content_body">{{ subpage.name }}</a></li>
+                        {% else %}
+                        <li><a class="subpage" href="{{ subpage.html }}">{{ subpage.name }}</a></li>
+                        {% endif %}
+                      {% endif %}
+                    {% endfor %}
+                    {% set _ = printed_subcategories.append(page.subcategory) %}
+
+                  {% endif %}
+                  {% endif %}
+                {% endfor %}
+
+                </ul>
+              </div><!-- /.card-body -->
+            </div><!-- /#sidenav_collapse{{loop.index}} -->
+
+          </div><!-- /.card -->
+        {% endif %}
+        {% set _ = printed_modules.append(page.category) %}
+
+      {% endif %}
+    {% endfor %}
+    </div><!-- /#sidenav -->
   {% endif %}
-</div><!-- /.guide_toc -->
+</div><!-- /.tree_nav -->