diff --git a/docs/branding/footer.html.in b/docs/branding/footer.html.in
index 93c1ae4..b27cba9 100644
--- a/docs/branding/footer.html.in
+++ b/docs/branding/footer.html.in
@@ -7,7 +7,7 @@
 $(function () {
     $("#toc").click(function(event) {
         // This to ensure clicks in the #toc don't make it up to the
-        // `closeTocOnBodyClick` handler.
+        // button handler.
         event.stopPropagation();
     });
     $("#toc a").click(function(event) {
@@ -26,6 +26,28 @@ $(function () {
         target.slideToggle(100);
         event.stopPropagation();
     });
+
+    $("#api").click(function(event) {
+        // This to ensure clicks in the #api don't make it up to the
+        // button handler.
+        event.stopPropagation();
+    });
+    $("#api a").click(function(event) {
+        $("#apibutton").click();
+    })
+    $("#apibutton").click(function() {
+        var target = $("#api");
+        if (target.css("display") !== "block") {
+            $("body").bind("click.apiCloser", function(event) {
+                $("#apibutton").click();
+                event.stopPropagation();
+            });
+        } else {
+            $("body").unbind("click.apiCloser");
+        }
+        target.slideToggle(100);
+        event.stopPropagation();
+    });
 });
 </script>
 
diff --git a/docs/branding/header.html.in b/docs/branding/header.html.in
index db9ab8c..b1bc535 100644
--- a/docs/branding/header.html.in
+++ b/docs/branding/header.html.in
@@ -24,14 +24,32 @@
 <div id="fadeout"></div>
 <div id="header">
   <span id="logo">
-    <a id="homelink" href="http://ldapjs.org">%(title)s</a>
+    <a id="homelink" href="http://ldapjs.org">ldap</a>
   </span>
+
+  <a class="navbutton" href="guide.html">Guide</a>
+
+  <span id="apibox">
+    <span id="apibutton" class="navbutton">API</span>
+    <div id="api" class="popup" style="display: none">
+      <ul>
+        <li><div><a href="server.html">server</a></div></li>
+        <li><div><a href="client.html">client</a></div></li>
+        <li><div><a href="dn.html">dn</a></div></li>
+        <li><div><a href="filters.html">filters</a></div></li>
+        <li><div><a href="errors.html">errors</a></div></li>
+        <li><div><a href="examples.html">examples</a></div></li>
+      </ul>
+    </div>
+  </span>
+
   <span id="tocbox">
-    <span id="tocbutton" class="navbutton">Table of Contents</span>
-    <div id="toc" style="display: none">
+    <span id="tocbutton" class="navbutton">Page Contents</span>
+    <div id="toc" class="popup" style="display: none">
       %(toc_html)s
     </div>
   </span>
+
   <a id="githubfork" href="http://github.com/mcavage/node-ldapjs">
     <img src="https://a248.e.akamai.net/assets.github.com/img/abad93f42020b733148435e2cd92ce15c542d320/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
          alt="Fork me on GitHub">
diff --git a/docs/branding/media/css/style.css b/docs/branding/media/css/style.css
index 1deb6ee..71290b6 100644
--- a/docs/branding/media/css/style.css
+++ b/docs/branding/media/css/style.css
@@ -154,17 +154,16 @@ body {
 #header {
   position: fixed;
   z-index: 100;
-  padding: 24px 0;
+  padding: 48px 0 24px 0;
   top: 0;
   left: auto;
   right: auto;
   width: 100%;
   background: white;
-  height: 86px;
 }
 #content {
   position: relative;
-  top: 200px;
+  top: 150px;
   overflow: auto;
   padding-bottom: 200px;
 }
@@ -328,49 +327,54 @@ a#homelink:hover {
   font-weight: bold;
   font-size: 60px;
   top: 55px;
-  position: fixed;
+}
+#apibox,
+#tocbox {
+  position: relative;
 }
 #tocbox {
-  position: absolute;
-  top: 67px;
-  left: 300px;
+  margin-left: 24px;
 }
 .navbutton {
   border: 1px solid #ccc;
-  padding: 5px 10px;
   position: relative;
+  display: inline-block;
+  width: 120px;
+  text-align: center;
   top: -7px;
   font-size: 70%;
   font-weight: bold;
   text-transform: uppercase;
+  text-decoration: none;
+  color: black;
 }
 .navbutton:hover {
   cursor: pointer;
   background-color: #f3f3f3;
 }
-#toc {
+.popup {
   border: 1px solid #ccc;
   padding: 5px 10px;
   background-color: white;
   font-size: 80%;
   line-height: 1.6em;
   position: absolute;
-  top: 15px;
+  top: 16px;
   left: 0px;
   width: 200px;
 }
-#toc a {
+.popup a {
   text-decoration: none;
 }
-#toc a:hover {
+.popup a:hover {
   text-decoration: underline;
 }
-#toc ul {
+.popup ul {
   margin: 0;
   padding: 0px;
   list-style-type: none;
 }
-#toc ul ul {
+.popup ul ul {
   margin-left: 24px;
 }
 #githubfork {