diff --git a/swh/web/ui/templates/includes/apidoc-header-toc.html b/swh/web/ui/templates/includes/apidoc-header-toc.html
new file mode 100644
index 000000000..8716a2ef0
--- /dev/null
+++ b/swh/web/ui/templates/includes/apidoc-header-toc.html
@@ -0,0 +1,26 @@
+  <li><a href="{{ url_for('browse_api_doc') }}#version">Version</a></li>
+  <li><a href="{{ url_for('browse_api_doc') }}#schema">Schema</a></li>
+  <li><a href="{{ url_for('browse_api_doc') }}#mimetype-override">Mimetype override</a></li>
+  <li><a href="{{ url_for('browse_api_doc') }}#parameters">Parameters</a>
+    <ul>
+      <li><a href="{{ url_for('browse_api_doc') }}#global-parameter">Global parameter</a></li>
+    </ul>
+  </li>
+  <li><a href="{{ url_for('browse_api_doc') }}#client-errors">Client errors</a>
+    <ul>
+      <li><a href="{{ url_for('browse_api_doc') }}#bad-request">Bad request</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#not-found">Not found</a></li>
+    </ul>
+  </li>
+  <li><a href="{{ url_for('browse_api_doc') }}#terminology">Terminology</a>
+    <ul>
+      <li><a href="{{ url_for('browse_api_doc') }}#content">Content</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#cryptographic-hash">(Cryptographic) hash</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#directory">Directory</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#origin">Origin</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#project">Project</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#release">Release</a></li>
+      <li><a href="{{ url_for('browse_api_doc') }}#revision">Revision</a></li>
+    </ul>
+  </li>
+  <li><a href="{{ url_for('browse_api_doc') }}#opened-endpoints">Opened endpoints</a></li>
diff --git a/swh/web/ui/templates/includes/apidoc-header.html b/swh/web/ui/templates/includes/apidoc-header.html
index 75e67d051..969a3a693 100644
--- a/swh/web/ui/templates/includes/apidoc-header.html
+++ b/swh/web/ui/templates/includes/apidoc-header.html
@@ -1,128 +1,106 @@
 <p>Welcome to Software Heritage project's API documentation.</p>
 <!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-generate-toc again -->
 <p><strong>Table of Contents</strong></p>
 <ul>
-<li><a href="#version">Version</a></li>
-<li><a href="#schema">Schema</a></li>
-<li><a href="#mimetype-override">Mimetype override</a></li>
-<li><a href="#parameters">Parameters</a>
-<ul>
-<li><a href="#global-parameter">Global parameter</a></li>
-</ul></li>
-<li><a href="#client-errors">Client errors</a>
-<ul>
-<li><a href="#bad-request">Bad request</a></li>
-<li><a href="#not-found">Not found</a></li>
-</ul></li>
-<li><a href="#terminology">Terminology</a>
-<ul>
-<li><a href="#content">Content</a></li>
-<li><a href="#cryptographic-hash">(Cryptographic) hash</a></li>
-<li><a href="#directory">Directory</a></li>
-<li><a href="#origin">Origin</a></li>
-<li><a href="#project">Project</a></li>
-<li><a href="#release">Release</a></li>
-<li><a href="#revision">Revision</a></li>
-</ul></li>
-<li><a href="#opened-endpoints">Opened endpoints</a></li>
+  {% include 'includes/apidoc-header-toc.html' %}
 </ul>
 <!-- markdown-toc end -->
 <h3 id="version">Version</h3>
 <p>Current version is <a href="/api/1/">1</a>.</p>
 <h3 id="schema">Schema</h3>
 <p>Api access is over https and accessed through <a href="/api/1/">https://archive.softwareheritage.org/api/1/</a>.</p>
 <p>Data is sent and received as json by default.</p>
 <p>Examples:</p>
 <ul>
 <li><p><a href="/api/1/stat/counters/" class="uri">/api/1/stat/counters/</a></p></li>
 <li><p>From the command line:</p></li>
 </ul>
 <pre class="shell"><code>curl -i https://archive.softwareheritage.org/api/1/stat/counters/</code></pre>
 <h4 id="mimetype-override">Mimetype override</h4>
 <p>The response output can be sent as yaml provided the client specifies it using the header field.</p>
 <p>Examples:</p>
 <ul>
 <li><p>From your favorite REST client API, execute the same request as before with the request header 'Accept' set the 'application/yaml'.</p></li>
 <li><p>From the command line:</p>
 <pre class="shell"><code>curl -i -H &#39;Accept: application/yaml&#39; https://archive.softwareheritage.org/api/1/stat/counters/</code></pre></li>
 </ul>
 <h3 id="parameters">Parameters</h3>
 <p>Some API endpoints can be used with with local parameters. The url then needs to be adapted accordingly.</p>
 <p>For example:</p>
 <pre class="text"><code>https://archive.softwareheritage.org/api/1/&lt;endpoint-name&gt;?&lt;field0&gt;=&lt;value0&gt;&amp;&lt;field1&gt;=&lt;value1&gt;</code></pre>
 <p>where:</p>
 <ul>
 <li>field0 is an appropriate field for the <endpoint-name> and value0</li>
 <li>field1 is an appropriate field for the <endpoint-name> and value1</li>
 </ul>
 <h4 id="global-parameter">Global parameter</h4>
 <p>One parameter is defined for all api endpoints <code>fields</code>. It permits to filter the output fields per key.</p>
 <p>For example, to only list the number of contents, revisions, directories on the statistical endpoints, one uses:</p>
 <p>Examples:</p>
 <ul>
 <li><p><a href="/api/1/stat/counters/?fields=content,directory,revision" class="uri">/api/1/stat/counters/?fields=content,directory,revision</a></p></li>
 <li><p>From the command line:</p>
 <pre class="shell"><code>curl https://archive.softwareheritage.org/api/1/stat/counters/\?fields\=content,directory,revision</code></pre></li>
 </ul>
 <p>Note: If the keys provided to filter on do not exist, they are ignored.</p>
 <h3 id="client-errors">Client errors</h3>
 <p>There are 2 kinds of error.</p>
 <p>In that case, the http error code will reflect. Furthermore, the response is a dictionary with one key 'error' detailing the problem.</p>
 <h4 id="bad-request">Bad request</h4>
 <p>This means that the input is incorrect.</p>
 <p>Example:</p>
 <ul>
 <li><p><a href="/api/1/content/1/" class="uri">/api/1/content/1/</a></p></li>
 <li><p>From the command line:</p>
 <pre class="shell"><code>curl -i https://archive.softwareheritage.org/api/1/content/1/</code></pre></li>
 </ul>
 <p>The api content expects an hash identifier so the error will mention that an hash identifier is expected.</p>
 <h4 id="not-found">Not found</h4>
 <p>This means that the request is ok but we do not found the information the user requests.</p>
 <p>Examples:</p>
 <ul>
 <li><p><a href="/api/1/content/04740277a81c5be6c16f6c9da488ca073b770d7f/" class="uri">/api/1/content/04740277a81c5be6c16f6c9da488ca073b770d7f/</a></p></li>
 <li><p>From the command line:</p>
 <pre class="shell"><code>curl -i https://archive.softwareheritage.org/api/1/content/04740277a81c5be6c16f6c9da488ca073b770d7f/</code></pre></li>
 </ul>
 <p>The hash identifier is ok but nothing is found for that identifier.</p>
 <h3 id="terminology">Terminology</h3>
 <p>You will find below the terminology the project SWH uses. More details can be found on <a href="https://wiki.softwareheritage.org/index.php?title=Glossary">swh's wiki glossary page</a>.</p>
 <h4 id="content">Content</h4>
 <p>A (specific version of a) file stored in the archive, identified by its cryptographic hashes (SHA1, &quot;git-like&quot; SHA1, SHA256) and its size.</p>
 <p>Also known as: Blob Note.</p>
 <h4 id="cryptographic-hash">(Cryptographic) hash</h4>
 <p>A fixed-size &quot;summary&quot; of a stream of bytes that is easy to compute, and hard to reverse.</p>
 <p>Also known as: Checksum, Digest.</p>
 <h4 id="directory">Directory</h4>
 <p>A set of named pointers to contents (file entries), directories (directory entries) and revisions (revision entries).</p>
 <h4 id="origin">Origin</h4>
 <p>A location from which a coherent set of sources has been obtained.</p>
 <p>Also known as: Data source.</p>
 <p>Examples:</p>
 <ul>
 <li>a Git repository</li>
 <li>a directory containing tarballs</li>
 <li>the history of a Debian package on snapshot.debian.org.</li>
 </ul>
 <h4 id="project">Project</h4>
 <p>An organized effort to develop a software product.</p>
 <p>Projects might be nested following organizational structures (sub-project, sub-sub-project), are associated to a number of human-meaningful metadata, and release software products via Origins.</p>
 <h4 id="release">Release</h4>
 <p>A revision that has been marked by a project as noteworthy with a specific, usually mnemonic, name (for instance, a version number).</p>
 <p>Also known as: Tag (Git-specific terminology).</p>
 <p>Examples:</p>
 <ul>
 <li>a Git tag with its name</li>
 <li>a tarball with its name</li>
 <li>a Debian source package with its version number.</li>
 </ul>
 <h4 id="revision">Revision</h4>
 <p>A &quot;point in time&quot; snapshot in the development history of a project.</p>
 <p>Also known as: Commit</p>
 <p>Examples:</p>
 <ul>
 <li>a Git commit</li>
 </ul>
 <h3 id="opened-endpoints">Opened endpoints</h3>
 <p>Open api endpoints is accessed at <a href="/api/1/">https://archive.softwareheritage.org/api/1/</a>.</p>
diff --git a/swh/web/ui/templates/layout.html b/swh/web/ui/templates/layout.html
index 985f2a323..6839fbf27 100644
--- a/swh/web/ui/templates/layout.html
+++ b/swh/web/ui/templates/layout.html
@@ -1,65 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock %} - The Software Heritage Archive</title>
     <!-- BEGIN: bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css') }}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
     <!-- END: bootstrap -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/pygment.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}">
     <script src="{{ url_for('static', filename='lib/jquery.dataTables.min.js') }}"></script>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
     <script>document.domain = "softwareheritage.org";</script>
 
   </head>
   <body>
     <div class="jumbotron">
       <div class="container">
         <h1>{{ self.title() }}</h1>
         <nav class="navbar navbar-default">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed"
                     data-toggle="collapse" data-target="#swh-navbar-collapse" aria-expanded="false">
 	      <span class="sr-only">Toggle navigation menu</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="{{ url_for('homepage') }}">SWH Archive</a>
           </div>
 
           <div class="collapse navbar-collapse" id="swh-navbar-collapse">
             <ul class="nav navbar-nav">
               <li><a href="https://www.softwareheritage.org">Main site</a></li>
               <li role="separator" class="divider"></li>
               <li><a href="{{ url_for('browse') }}">Browse</a></li>
               <li role="separator" class="divider"></li>
-              <li><a href="{{ url_for('browse_api_doc') }}">API</a></li>
+              <li><a href="{{ url_for('browse_api_doc') }}" class="dropdown-toggle" data-toggle="dropdown"
+                     role="button" aria-haspopup="true" aria-expanded="false">API <span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                  {% include 'includes/apidoc-header-toc.html' %}
+                  </ul>
+              </li>
               <li role="separator" class="divider"></li>
               <li><a href="{{ url_for('about') }}">About</a></li>
             </ul>
           </div>
         </nav>
       </div>
     </div>
     {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
     <div class="container messages">
       {% for category, message in messages %}
       <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
       {% endfor %}
     </div>
     {% endif %}
     {% endwith %}
     <div class="container content">
       {% block content %}{% endblock %}
     </div>
   </body>
 </html>