diff --git a/rest_framework/templates/rest_framework/docs/_recursive_document.html b/rest_framework/templates/rest_framework/docs/_recursive_document.html
index fcdbf5c80..b001193a4 100644
--- a/rest_framework/templates/rest_framework/docs/_recursive_document.html
+++ b/rest_framework/templates/rest_framework/docs/_recursive_document.html
@@ -1,9 +1,9 @@
 {% load rest_framework %}
 {% for section_key, section in items %}
     {% if section_key %}
-        <h{{level}} id="{{ path|list_add:section_key|join:'-' }}" class="coredocs-section-title">
+        <h{{level}} id="{{ path|list_add:section_key|join:'-'|slugify }}" class="coredocs-section-title">
             {{ section_key }}
-            <a href="#{{ path|list_add:section_key|join:'-' }}"><i class="fa fa-link" aria-hidden="true"></i></a>
+            <a href="#{{ path|list_add:section_key|join:'-'|slugify }}"><i class="fa fa-link" aria-hidden="true"></i></a>
         </h{{level}}>
     {% endif %}
 
diff --git a/rest_framework/templates/rest_framework/docs/_recursive_menu.html b/rest_framework/templates/rest_framework/docs/_recursive_menu.html
index bb86a87c5..cebf30717 100644
--- a/rest_framework/templates/rest_framework/docs/_recursive_menu.html
+++ b/rest_framework/templates/rest_framework/docs/_recursive_menu.html
@@ -1,14 +1,14 @@
 {% load rest_framework %}
 {% if items %}
-<ul id="{% if path %}{{ path|join:"-" }}-dropdown{% else %}menu-content{% endif %}" class="menu-content collapse out">
+<ul id="{% if path %}{{ path|join:"-"|slugify }}-dropdown{% else %}menu-content{% endif %}" class="menu-content collapse out">
     {% for section_key, section in items %}
-        <li data-toggle="collapse" data-target="#{{ path|list_add:section_key|join:"-" }}-dropdown" class="collapsed">
+        <li data-toggle="collapse" data-target="#{{ path|list_add:section_key|join:"-"|slugify }}-dropdown" class="collapsed">
           <a><i class="fa fa-dot-circle-o fa-lg"></i> {% for p in path %}{{ p }}/{% endfor %}{% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
         </li>
         {% if section.links|items %}
-            <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ path|list_add:section_key|join:'-' }}-dropdown">
+            <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ path|list_add:section_key|join:'-'|slugify }}-dropdown">
                 {% for link_key, link in section.links|items %}
-                <li><a href="#{{ path|list_add:section_key|list_add:link_key|join:"-" }}">{{ link.title|default:link_key }}</a></li>
+                <li><a href="#{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}">{{ link.title|default:link_key }}</a></li>
                 {% endfor %}
             </ul>
         {% endif %}
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index dd5413f0d..d27dc6adc 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -10,9 +10,9 @@
         <i class="fa fa-exchange"></i> Interact
     </button>
 
-    <h3 id="{{ path|list_add:section_key|list_add:link_key|join:"-" }}" class="coredocs-link-title">
+    <h3 id="{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}" class="coredocs-link-title">
         {{ link.title|default:link_key }}
-        <a href="#{{ path|list_add:section_key|list_add:link_key|join:"-" }}"><i class="fa fa-link" aria-hidden="true"></i></a>
+        <a href="#{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}"><i class="fa fa-link" aria-hidden="true"></i></a>
     </h3>
 
     <div class="meta">