diff --git a/website/Gemfile.lock b/website/Gemfile.lock
index 4bb9b0d97..5842327a3 100644
--- a/website/Gemfile.lock
+++ b/website/Gemfile.lock
@@ -50,7 +50,7 @@ GEM
       uber (~> 0.0.14)
     http_parser.rb (0.6.0)
     i18n (0.7.0)
-    json (1.8.3.1)
+    json (2.2.0)
     kramdown (1.17.0)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
diff --git a/website/source/api/nodes.html.md b/website/source/api/nodes.html.md
index 2f5173fe8..13ec28e98 100644
--- a/website/source/api/nodes.html.md
+++ b/website/source/api/nodes.html.md
@@ -10,7 +10,7 @@ description: |-
 
 The `/node` endpoints are used to query for and interact with client nodes.
 
-### List Nodes
+## List Nodes
 
 This endpoint lists all nodes registered with Nomad.
 
diff --git a/website/source/assets/javascripts/api-toc.js b/website/source/assets/javascripts/api-toc.js
new file mode 100644
index 000000000..0ece169bf
--- /dev/null
+++ b/website/source/assets/javascripts/api-toc.js
@@ -0,0 +1,47 @@
+// This is adapted from Terraform’s web site:
+// https://github.com/hashicorp/terraform-website/blob/b218a3a9aac14462065e2035e8281d38e784af47/content/source/assets/javascripts/application.js
+
+document.addEventListener('turbolinks:load', function() {
+    "use strict";
+
+    // On docs/content pages, add a hierarchical quick nav menu if there are
+    // more than two H2 headers.
+    var headers = $('#inner').find('h2');
+    if (headers.length > 2 && $("div#inner-quicknav").length === 0) {
+        // Build the quick-nav HTML:
+        $("#inner h1").first().after(
+            '<div id="inner-quicknav">' +
+                '<span id="inner-quicknav-trigger">' +
+                    'Jump to Section' +
+                    '<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>' +
+                '</span>' +
+                '<ul class="dropdown"></ul>' +
+            '</div>'
+        );
+        var quickNav = $('#inner-quicknav > ul.dropdown');
+        headers.each(function(index, element) {
+            var level = element.nodeName.toLowerCase();
+            var header_text = $(element).text();
+            var header_id = $(element).attr('id');
+            quickNav.append('<li class="level-' + level + '"><a href="#' + header_id + '">' + header_text + '</a></li>');
+        });
+        // Attach event listeners:
+        // Trigger opens and closes.
+        $('#inner-quicknav #inner-quicknav-trigger').on('click', function(e) {
+            $(this).siblings('ul').toggleClass('active');
+            e.stopPropagation();
+        });
+        // Clicking inside the quick-nav doesn't close it.
+        quickNav.on('click', function(e) {
+            e.stopPropagation();
+        });
+        // Jumping to a section means you're done with the quick-nav.
+        quickNav.find('li a').on('click', function() {
+            quickNav.removeClass('active');
+        });
+        // Clicking outside the quick-nav closes it.
+        $('body').on('click', function() {
+            quickNav.removeClass('active');
+        });
+    }
+});
diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js
index 51c8914f8..01db9c230 100644
--- a/website/source/assets/javascripts/application.js
+++ b/website/source/assets/javascripts/application.js
@@ -6,3 +6,4 @@
 //= require hashicorp/analytics
 
 //= require analytics
+//= require api-toc
diff --git a/website/source/assets/stylesheets/_api.scss b/website/source/assets/stylesheets/_api.scss
index dd31ccfe9..9178cb340 100644
--- a/website/source/assets/stylesheets/_api.scss
+++ b/website/source/assets/stylesheets/_api.scss
@@ -58,3 +58,68 @@
     }
   }
 }
+
+#inner-quicknav {
+  margin-top: -15px;
+  margin-bottom: 25px;
+  margin-left: 10px;
+
+  span {
+    line-height: 20px;
+    cursor: pointer;
+    font-variant-caps: all-small-caps;
+    color: #666;
+
+    svg {
+      fill: $body-font-color;
+      position: relative;
+      top: -2px;
+      width: 9px;
+      height: 5px;
+      margin-left: 7px;
+    }
+  }
+
+  ul {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.5s ease;
+    width: 80%;
+    box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
+    border-radius: 3px;
+    padding: 2rem;
+    position: absolute;
+    z-index: 1;
+    background-color: white;
+    margin-left: -15px;
+
+    &.active {
+      visibility: visible;
+      opacity: 1;
+      display: block;
+      transition-duration: 0s;
+    }
+
+    li {
+      clear: both;
+      width: 100%;
+      display: block;
+      position: relative;
+      margin-bottom: 0;
+      margin-left: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      $toc-indent: 30px;
+      &.level-h2 { padding-left: $toc-indent * 0 }
+      &.level-h3 { padding-left: $toc-indent * 1 }
+      &.level-h4 { padding-left: $toc-indent * 2 }
+      &.level-h5 { padding-left: $toc-indent * 3 }
+      &.level-h6 { padding-left: $toc-indent * 4 }
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+}