diff --git a/swh/web/ui/static/css/style.css b/swh/web/ui/static/css/style.css
index 826cebb6..4a405f1f 100644
--- a/swh/web/ui/static/css/style.css
+++ b/swh/web/ui/static/css/style.css
@@ -1,215 +1,249 @@
 /*
 version:   0.1
 date:      21/09/15
 author:    swh
 email:     swh
 website:   softwareheritage.org
 version history: /style.css
 */
 
 @import url(https://fonts.googleapis.com/css?family=Alegreya:400,400italic,700,700italic);
 @import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400italic,500,500italic,700,700italic,100,300,100italic,300italic);
 
 body {
     font-family: 'Alegreya Sans', sans-serif;
     font-size: 1.6rem;
     line-height: 1.5;
     color: rgba(0, 0, 0, 0.55);
     padding-top: 65px;  /* avoid fixed bootstrap navbar covers content */
 }
 
 .heading {
     font-family: 'Alegreya', serif;
 }
 
 .shell, .text {
     font-size: 0.7em;
 }
 
 img.swh-logo {
     max-height: 40px;
 }
 
 .jumbotron {
     padding: 0;
     background-color: rgba(0, 0, 0, 0);
     position: fixed;
     top: 0;
     width: 100%;
 }
 
 #swh-navbar-collapse {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom: 5px solid;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
 }
 
 .nav-horizontal {
     float: right;
 }
 
 h3[id], h4[id] {  /* avoid in-page links covered by navbar */
     padding-top: 65px;
     margin-top: -65px;
     display: inline-block; /* webkit compatibility */
 }
 
 a               { color: #377ba8; }
 h1, h2, h3, h4  { margin: 0;
                   color: #e20026;
                 }
 h1              { font-size: 1.8em; }
 h2              { font-size: 1.2em; }
 
 a               {
                   color: rgba(0, 0, 0, 0.75);
                   border-bottom-style: dotted;
                   border-bottom-width: 1px;
                   border-bottom-color: rgb(91, 94, 111);
                 }
 
 a:hover         {
                   color: black;
                 }
 
 ul.dropdown-menu > li > a,
 ul.dropdown-menu > li > ul > li > a,
 .navbar-header > a,
 ul.navbar-nav > li > a { /* No decoration on links in dropdown menu */
                   border-bottom-style: none;
                 }
 
 .navbar-header > a,
 ul.navbar-nav > li > a {
     color: #323232;
     font-weight: 700;
 }
 
 .navbar-header > a:hover,
 ul.navbar-nav > li > a:hover {
     color: #8f8f8f;
 }
 
 .sitename .first-word, .sitename .second-word {
     font-weight: normal;
     font-size: 1.8rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 ul.dropdown-menu > li,
 ul.dropdown-menu > li > ul > li { /* No decoration on bullet points in dropdown menu */
                   list-style-type: none;
                 }
 
 .page           { margin: 2em auto; width: 35em; border: 5px solid #ccc;
                   padding: 0.8em; background: white; }
 .entries        { list-style: none; margin: 0; padding: 0; }
 .entries li     { margin: 0.8em 1.2em; }
 .entries li h2  { margin-left: -1em; }
 .add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
 .add-entry dl   { font-weight: bold; }
 .metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
                   margin-bottom: 1em; background: #fafafa; }
 .flash          { background: #cee5F5; padding: 0.5em;
                   border: 1px solid #aacbe2; }
 .error          { background: #f0d6d6; padding: 0.5em; }
 
 .file-found     { color: #23BA49; }
 .file-notfound  { color: #FF4747; }
 
 /* Bootstrap custom styling to correctly render multiple
  * form-controls in an input-group:
  *                github.com/twbs/bootstrap/issues/12732 */
 
 .input-group-field {
     display: table-cell;
     vertical-align: middle;
     border-radius:4px;
     min-width:1%;
     white-space: nowrap;
 }
 
 .input-group-field .form-control {
     border-radius: inherit !important;
 }
 
 .input-group-field:not(:first-child):not(:last-child) {
     border-radius:0;
 }
 
 .input-group-field:not(:first-child):not(:last-child) .form-control {
     border-left-width: 0;
     border-right-width: 0;
 }
 
 .input-group-field:last-child {
     border-top-left-radius:0;
     border-bottom-left-radius:0;
 }
 
 .input-group > span:not(:last-child) > button {
    border-radius: 0;
 }
 
 .multi-input-group > .input-group-btn {
   vertical-align: bottom;
   padding: 0;
 }
 
 .dataTables_filter input {
     width: 70%;
     float: right;
 }
 
 tr.api-doc-route-upcoming > td, tr.api-doc-route-upcoming > td > a {
     color: orange;
 }
 
 tr.api-doc-route-deprecated > td, tr.api-doc-route-deprecated > td > a {
     color: red;
 }
 
 #back-to-top {
   display: initial;
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 10;
 }
 
 #back-to-top a img {
   display: block;
   width: 32px;
   height: 32px;
   background-size: 32px 32px;
   text-indent: -999px;
   overflow: hidden;
 }
 
 .table > thead > tr > th {
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 pre {
     border: 1px dashed black;
     border-radius: 10px;
     background-color: hsl(47, 99%, 75%);
 }
 
 .dataTables_wrapper {
     position: static;
 }
+
+/* breadcrumbs */
+
+.bread-crumbs{
+    display: inline-block;
+    margin: 0 0 15px;
+    overflow: hidden;
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 1.2rem;
+}
+
+bread-crumbs ul {
+    list-style-type: none;
+}
+
+.bread-crumbs li {
+    float: left;
+    margin-right: 10px;
+    list-style-type: none;
+}
+
+.bread-crumbs a {
+    color: rgba(0, 0, 0, 0.75);
+    border-bottom-style: none;
+}
+
+.bread-crumbs a:hover {
+    color: rgba(0, 0, 0, 0.85);
+    text-decoration: underline;
+}
+
+.title-small .bread-crumbs{
+    margin: -30px 0 25px;
+}
diff --git a/swh/web/ui/templates/api-endpoints.html b/swh/web/ui/templates/api-endpoints.html
index 0de9f808..f3c98952 100644
--- a/swh/web/ui/templates/api-endpoints.html
+++ b/swh/web/ui/templates/api-endpoints.html
@@ -1,53 +1,60 @@
 {% extends "layout.html" %}
 {% block title %}API Overview{% endblock %}
 {% block content %}
 
+<nav class="bread-crumbs">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li>/</li>
+    <li>endpoints</li>
+  </ul>
+</nav>
 <div class="api-doc">
   This lists the current API endpoints for version 1. For a more general description, please refer
   to <a href="/api/">the main documentation</a>.
 
   <noscript>
   <p>
     <ul>
     {% for route, doc in doc_routes %}
       <li><a href="#{{ route }}">{{ route }}</a></li>
     {% endfor %}
     </ul>
   </p>
   </noscript>
 </div>
 
 <div class="api-doc table-responsive">
   <table class="table table-striped search-res swhtable">
     <thead class="thead-default">
       <th>Route</th>
       <th>Status</th>
       <th>Description</th>
     </thead>
     <tbody>
       {% for route, doc in doc_routes %}
       <tr class="api-doc-route{% for tag in doc['tags'] %} api-doc-route-{{ tag }} {% endfor %}">
         <td id="{{ route }}"><a href="{{ route }}">{{ route }}</a></td>
         {% if 'tags' in doc and doc['tags'] is not none %}
         <td>{{ ', '.join(doc['tags']) }}</td>
         {% else %}
         <td>opened</td>
         {% endif %}
         <td>{{ doc['docstring'] | safe_docstring_display | safe }}</td>
       </tr>
       {% endfor %}
     </tbody>
   </table>
 </div>
 <script type="text/javascript">
   $(document).ready(function() {
     $('table.swhtable').DataTable({
          "paging": false,
          "info": false,
          "order": [[1, "asc"]]
       });
     $(".dataTables_filter input").addClass("form-control")
 
   });
 </script>
 {% endblock %}
diff --git a/swh/web/ui/templates/apidoc.html b/swh/web/ui/templates/apidoc.html
index 7bee1e5b..9db969ef 100644
--- a/swh/web/ui/templates/apidoc.html
+++ b/swh/web/ui/templates/apidoc.html
@@ -1,114 +1,123 @@
 {% extends "layout.html" %}
 {% block title %}Software Heritage API{% endblock %}
 {% block content %}
+<nav class="bread-crumbs">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li>/</li>
+    <li><a href="/api/1/">endpoints</a></li>
+    <li>/</li>
+    <li>{{ request.path }}</li>
+  </ul>
+</nav>
 
 {% if docstring %}
 <div class="docstring">
   <h2> Overview </h2>
   {{ docstring | safe_docstring_display | safe }}
 </div>
 {% endif %}
 {% if response_data and response_data is not none %}
 <div class="response-data">
   <h2> Request </h2>
   <pre><strong>{{ request.method }}</strong> {{ request.url }}</pre>
   {% if headers_data and headers_data is not none %}
   <h2> Headers </h2>
     {% for header_name, header_value in headers_data.items() %}
       <pre><strong>{{ header_name }}</strong> {{ header_value | urlize_header_links | safe }}</pre>
     {% endfor %}
   {% endif %}
     <h2> Result </h2>
     <pre>{{ response_data | escape_author_fields | urlize_api_links | safe }}</pre>
 </div>
 {% endif %}
 <hr/>
 <div class="doc-urls">
   <table class="m-x-auto table">
     <thead>
       <tr>
 	<th>URL</th>
 	<th>Allowed Methods</th>
       </tr>
     </thead>
     <tbody>
       {% for url in urls %}
       <tr>
 	<td>
 	  {{ url['rule'] }}
 	</td>
 	<td>
 	  {{ url['methods'] | sort | join(', ') }}
 	</td>
       </tr>
       {% endfor %}
     </tbody>
   </table>
 </div>
 <hr/>
 {% if args and args|length > 0 %}
 <div class="doc-args">
   <h2> Args </h2>
   <dl class="doc-argslist dl-horizontal">
     {% for arg in args %}
     <dt> {{ arg['name'] }}: {{ arg['type'] }} </dt>
     <dd> {{ arg['doc'] | safe_docstring_display | safe }} </dd>
     {% endfor %}
   </dl>
  </div>
 {% endif %}
 {% if params and params|length > 0 %}
 <div class="doc-params">
   <h2> Params </h2>
   <dl class="doc-paramslist dl-horizontal">
     {% for param in params %}
     <dt> {{ param['name'] }}: string </dt>
     <dd> {{ param['doc'] | safe_docstring_display | safe }} </dd>
     {% endfor %}
   </dl>
  </div>
 {% endif %}
 {% if excs and excs|length > 0 %}
 <div class="doc-excs">
   <h2> Raises </h2>
   <dl class="doc-excslist dl-horizontal">
     {% for exc in excs %}
     <dt> {{ exc['exc'] }} </dt>
     <dd> {{ exc['doc'] | safe_docstring_display | safe }} </dd>
     {% endfor %}
   </dl>
 </div>
 {% endif %}
 {% if headers %}
 <div class="doc-headers">
   <h2> Headers </h2>
   <dl class="doc-headers dl-horizontal">
     {% for header in headers %}
     <dt> {{ header['name'] }}: string </dt>
     <dd> {{ header['doc'] | safe_docstring_display | safe }} </dd>
     {% endfor %}
   </dl>
 </div>
 {% endif %}
 {% if return %}
 <div class="doc-return">
   <h2> Returns </h2>
   <dl class="doc-return dl-horizontal">
     <dt> {{ return['type'] }} </dt>
     <dd> {{ return['doc'] | safe_docstring_display | safe }} </dd>
   </dl>
 </div>
 {% endif %}
 {% if examples %}
 <div class="doc-example">
   <h2> Examples </h2>
   <dl class="doc-example dl-horizontal">
   {% for example in examples %}
     <dd>
       <a href="{{ example }}">{{ example }}</a>
     </dd>
   {% endfor %}
   </dl>
 </div>
 {% endif %}
 {% endblock %}
diff --git a/swh/web/ui/templates/includes/apidoc-header.html b/swh/web/ui/templates/includes/apidoc-header.html
index 90d5dc6d..34b9ad92 100644
--- a/swh/web/ui/templates/includes/apidoc-header.html
+++ b/swh/web/ui/templates/includes/apidoc-header.html
@@ -1,106 +1,109 @@
+<nav class="bread-crumbs">
+  <ul><li>Home</li></ul>
+</nav>
 <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>
   {% 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 in 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>
 <pre class="shell"><code>curl -i https://archive.softwareheritage.org/api/1/stat/counters/</code></pre></li>
 </ul>
 <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 to 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 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>Accessible through <a href="/api/1/">https://archive.softwareheritage.org/api/1/</a>.</p>