diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index d1f60b63b..26fa2f8a0 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -168,46 +168,19 @@ body {
 
 /* @group Language Switcher */
 
-.sidebar .language-switcher {
-    text-align: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
+.sidebar .menu-list.menu-list-bottom {
+    margin-bottom: 0;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
+    border-top: 1px solid #23282e;
 }
 
-.sidebar .language-switcher h6 {
-    margin-bottom: 15px;
-}
-
-.sidebar .language-switcher .btn {
-    padding: 3px 7px;
-}
-
-.sidebar .language-switcher .dropdown-menu {
-  margin-bottom: 5px;
-  border: 0;
-  border-radius: 0;
-  min-width: 130px;
-}
-
-.sidebar .language-switcher .dropdown-menu > li > a {
-  padding: 3px 10px;
-}
-
-.sidebar .language-switcher .dropdown-menu > .active > a,
-.sidebar .language-switcher .dropdown-menu > .active > a:hover,
-.sidebar .language-switcher .dropdown-menu > .active > a:focus {
-  background-color: #17759c;
-}
-
-.sidebar .language-switcher .dropdown-menu > li > a,
-.sidebar .language-switcher .dropdown-menu > li > a:hover,
-.sidebar .language-switcher .dropdown-menu > li > a:focus {
-  background-color: #23282e;
+.sidebar .menu-list-bottom li span {
+  float: right;
+  margin-right: 20px;
+  color: #d19b3d;
 }
 
 /* @end Language Switcher */
@@ -263,24 +236,10 @@ body {
     text-align: center;
   }
 
-  .sidebar .language-switcher {
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
+  .sidebar .menu-list.menu-list-bottom {
     position: static;
   }
 
-  .sidebar .language-switcher .btn .caret {
-    margin-left: 0;
-    border-bottom: 0;
-    border-top: 4px dashed;
-  }
-
-  .sidebar .language-switcher .dropup .dropdown-menu {
-    top: 30px;
-    bottom: inherit;
-  }
-
   .sidebar .brand {
     margin-top: 0;
     margin-bottom: 0;
diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html
index add56b0b4..ec30999f6 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -72,16 +72,16 @@
             const doc = codec.decode(schema)
 
             // Language Control
-            $('.language-control li a').click(function (event) {
+            $('#language-control li').click(function (event) {
                 event.preventDefault();
-                var button = $(this)
-                var language = button.data("language")
+                const languageMenuItem = $(this).find('a');
+                var language = languageMenuItem.data("language")
 
-                var languageControls = $('.language-control li a')
-                languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
-                languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
+                var languageControls = $(this).closest('ul').find('li');
+                languageControls.find('a').not('[data-language="' + language +'"]').parent().removeClass("active")
+                languageControls.find('a').filter('[data-language="' + language +'"]').parent().addClass("active")
 
-                button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
+                $('#selected-language').text(language)
 
                 var codeBlocks = $('pre.highlight')
                 codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index 313ae7cb4..cda8080f6 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -16,18 +16,19 @@
             {% endfor %}
         </ul>
 
-        <div class="language-switcher">
-            <h6>Choose Language</h6>
-            <div class="btn-group dropup">
-              <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
-              </button>
-              <ul class="dropdown-menu language-control">
+        <ul class="menu-list menu-list-bottom">
+            <li>
+                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span>none</span>
+            </li>
+            <li data-toggle="collapse" data-target="#language-control" class="collapsed">
+                <a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">shell</span>
+            </li>
+            <ul class="sub-menu collapse out" id="language-control">
                 <li class="active"><a href="#" data-language="shell">shell</a></li>
                 <li><a href="#" data-language="javascript">javascript</a></li>
                 <li><a href="#" data-language="python">python</a></li>
-              </ul>
-            </div>
-        </div>
+            </ul>
+        </ul>
+
     </div>
 </div>