diff --git a/rest_framework/templates/rest_framework/docs/document.html b/rest_framework/templates/rest_framework/docs/document.html
index 274eee4e3..467f64cb5 100644
--- a/rest_framework/templates/rest_framework/docs/document.html
+++ b/rest_framework/templates/rest_framework/docs/document.html
@@ -13,7 +13,7 @@
     {% if 'javascript' in langs %}{% include "rest_framework/docs/langs/javascript-intro.html" %}{% endif %}
 </div>
 </div>
-{% if document.data %}
+
 {% for section_key, section in document.data|items %}
 {% if section_key %}
     <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}"><i class="fa fa-link" aria-hidden="true"></i>
@@ -23,9 +23,15 @@
     {% for link_key, link in section.links|items %}
         {% include "rest_framework/docs/link.html" %}
     {% endfor %}
+    {% if not section.links %}
+        {%for sub_section_key,sub_section in section.data|items%}
+            {% for link_key, link in sub_section.links|items %}
+                {% include "rest_framework/docs/link.html" %}
+            {% endfor %}
+        {%endfor%}
+    {% endif %}
 {% endfor %}
 
 {% for link_key, link in document.links|items %}
     {% include "rest_framework/docs/link.html" %}
 {% endfor %}
-{% endif %}
diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
index 3703301c2..357d30213 100644
--- a/rest_framework/templates/rest_framework/docs/interact.html
+++ b/rest_framework/templates/rest_framework/docs/interact.html
@@ -1,7 +1,7 @@
 {% load rest_framework %}
 
 <!-- Modal -->
-<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
+<div class="modal fade api-modal" id="{{ section_key }}_{%if sub_section_key%}{{sub_section_key}}_{%endif%}{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">
@@ -16,7 +16,7 @@
 
     </div>
 
-    <form data-key='["{{ section_key }}", "{{ link_key }}"]' class="api-interaction">
+    <form data-key='["{{ section_key }}", {%if sub_section_key%}"{{sub_section_key}}", {%endif%}"{{ link_key }}"]' class="api-interaction">
     <div class="modal-body">
       <div class="row">
         <div class="col-lg-6 request">
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index ae8c7b700..d103ade0b 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -6,11 +6,11 @@
         class="btn btn-sm btn-success"
         style="float: right; margin-top: 20px"
         data-toggle="modal"
-        data-target="#{{ section_key }}_{{ link_key }}_modal">
+        data-target="#{{ section_key }}_{%if sub_section_key%}{{sub_section_key}}_{%endif%}{{ link_key }}_modal">
         <i class="fa fa-exchange"></i> Interact
     </button>
 
-    <h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+    <h3 id="{{ section_key }}-{%if sub_section_key%}{{sub_section_key}}-{%endif%}{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{%if sub_section_key%}{{sub_section_key}}-{%endif%}{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
 </a></h3>
 
     <div class="meta">
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index 7e20e2485..7b7797fb5 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -5,7 +5,6 @@
     <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
     <div class="menu-list">
         <ul id="menu-content" class="menu-content collapse out">
-            {% if document.data %}
             {% for section_key, section in document.data|items %}
             <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
                 <a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
@@ -13,10 +12,16 @@
                 {% for link_key, link in section.links|items %}
                     <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
                 {% endfor %}
-                </ul>
-            </li>
+                {% if not section.links %}
+                    {% for sub_section_key, sub_section in section.data|items %}
+                       {% for link_key, link in sub_section.links|items %}
+                            <li><a href="#{{section_key}}-{{sub_section_key}}-{{ link_key }}">{{sub_section_key}} >> {{ link.title|default:link_key }}</a></li>
+                         {% endfor %}
+                    {% endfor %}
+                {%endif%}
+            	</ul>
+	    </li>
             {% endfor %}
-            {% endif %}
         </ul>
 
         <ul class="menu-list menu-list-bottom">