diff --git a/swh/web/assets/src/bundles/browse/snapshot-navigation.css b/swh/web/assets/src/bundles/browse/snapshot-navigation.css
index a59d1753..7c0109b1 100644
--- a/swh/web/assets/src/bundles/browse/snapshot-navigation.css
+++ b/swh/web/assets/src/bundles/browse/snapshot-navigation.css
@@ -1,50 +1,49 @@
 /**
  * Copyright (C) 2018-2019  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 .swh-browse-top-navigation {
-    min-height: 43px;
-    padding: 4px 5px 0 5px;
+    padding: 4px 5px 7px 5px;
 }
 
 .swh-branches-releases {
     min-width: 200px;
 }
 
 .swh-branches-switch,
 .swh-releases-switch {
     padding: 5px 15px !important;
 }
 
 li.swh-branch:hover,
 li.swh-release:hover {
     background-color: #e8e8e8;
 }
 
 .swh-branch a:hover,
 .swh-release a:hover {
     text-decoration: none;
 }
 
 .swh-origin-visit-details,
 .swh-snapshot-details {
     text-align: center;
 }
 
 .swh-origin-visit-details ul,
 .swh-snapshot-details ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 .swh-origin-visit-details li,
 .swh-snapshot-details li {
     display: inline-block;
     vertical-align: middle;
     margin-left: 10px;
     margin-right: 10px;
 }
diff --git a/swh/web/templates/includes/top-navigation.html b/swh/web/templates/includes/top-navigation.html
index 001e5c9a..2e66468e 100644
--- a/swh/web/templates/includes/top-navigation.html
+++ b/swh/web/templates/includes/top-navigation.html
@@ -1,140 +1,141 @@
 {% comment %}
 Copyright (C) 2017-2019  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 
-<div class="swh-browse-top-navigation">
+<div class="swh-browse-top-navigation d-flex align-items-start justify-content-between flex-wrap">
   {% if snapshot_context %}
     {% if snapshot_context.branch or snapshot_context.release %}
-      <div class="dropdown float-left" id="swh-branches-releases-dd">
+      <div class="dropdown" id="swh-branches-releases-dd">
         <button class="btn btn-block btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
           {% if snapshot_context.branch %}
             <i class="{{ swh_object_icons.branch }} mdi-fw" aria-hidden="true"></i>
             Branch: <strong>{{ snapshot_context.branch }}</strong>
           {% else %}
             <i class="{{ swh_object_icons.release }} mdi-fw" aria-hidden="true"></i>
             Release: <strong>{{ snapshot_context.release }}</strong>
           {% endif %}
           <span class="caret"></span>
         </button>
         <ul class="scrollable-menu dropdown-menu swh-branches-releases">
           <ul class="nav nav-tabs">
             <li class="nav-item"><a class="nav-link active swh-branches-switch" data-toggle="tab">Branches</a></li>
             <li class="nav-item"><a class="nav-link swh-releases-switch" data-toggle="tab">Releases</a></li>
           </ul>
           <div class="tab-content">
             <div class="tab-pane active" id="swh-tab-branches">
               {% for b in snapshot_context.branches %}
                 <li class="swh-branch">
                   <a href="{{ b.url | safe }}">
                     <i class="{{ swh_object_icons.branch }} mdi-fw" aria-hidden="true"></i>
                     {% if b.name == snapshot_context.branch %}
                       <i class="mdi mdi-check-bold mdi-fw" aria-hidden="true"></i>
                     {% else %}
                       <i class="mdi mdi-fw" aria-hidden="true"></i>
                     {% endif %}
                     {{ b.name }}
                   </a>
                 </li>
               {% endfor %}
               {% if snapshot_context.branches|length < snapshot_context.snapshot_sizes.revision %}
                 <li>
                   <i class="mdi mdi-alert mdi-fw" aria-hidden="true"></i>
                   Branches list truncated to {{ snapshot_context.branches|length }} entries,
                   {{ snapshot_context.branches|length|mul:-1|add:snapshot_context.snapshot_sizes.revision }}
                   were omitted.
                 </li>
               {% endif %}
             </div>
             <div class="tab-pane" id="swh-tab-releases">
               {% if snapshot_context.releases %}
                 {% for r in snapshot_context.releases %}
                   {% if r.target_type == 'revision' %}
                     <li class="swh-release">
                       <a href="{{ r.url | safe }}">
                         <i class="{{ swh_object_icons.release }} mdi-fw" aria-hidden="true"></i>
                         {% if r.name == snapshot_context.release %}
                           <i class="mdi mdi-check-bold mdi-fw" aria-hidden="true"></i>
                         {% else %}
                           <i class="mdi mdi-fw" aria-hidden="true"></i>
                         {% endif %}
                         {{ r.name }}
                       </a>
                     </li>
                   {% endif %}
                 {% endfor %}
                 {% if snapshot_context.releases|length < snapshot_context.snapshot_sizes.release %}
                 <li>
                   <i class="mdi mdi-alert mdi-fw" aria-hidden="true"></i>
                   Releases list truncated to {{ snapshot_context.releases|length }} entries,
                   {{ snapshot_context.releases|length|mul:-1|add:snapshot_context.snapshot_sizes.release }}
                   were omitted.
                 </li>
               {% endif %}
               {% else %}
                 <span>No releases to show</span>
               {% endif %}
             </div>
           </div>
         </ul>
       </div>
     {% endif %}
   {% endif %}
 
-  <div class="btn-group float-right swh-actions-dropdown flex d-flex flex-wrap">
+  <div class="flex-grow-1">
+    {% include "includes/breadcrumbs.html" %}
+  </div>
+
+  <div class="btn-group swh-actions-dropdown ml-auto">
     {% if top_right_link %}
       <a href="{{ top_right_link.url | safe }}" class="btn btn-default btn-sm swh-tr-link" role="button">
         {% if top_right_link.icon %}
           <i class="{{ top_right_link.icon }} mdi-fw" aria-hidden="true"></i>
         {% endif %}
         {{ top_right_link.text }}
       </a>
     {% endif %}
     {% if available_languages %}
       <select data-placeholder="Select Language" class="language-select chosen-select">
         <option value=""></option>
         {% for lang in available_languages %}
           <option value="{{ lang }}">{{ lang }}</option>
         {% endfor %}
       </select>
     {% endif %}
     {% if show_actions_menu %}
       <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
         <i class="mdi mdi-menu mdi-fw" aria-hidden="true"></i>Actions
         <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right swh-browse-actions-menu">
         {% if not snapshot_context or not snapshot_context.is_empty %}
           {% include "includes/vault-create-tasks.html" %}
         {% endif %}
         {% include "includes/show-metadata.html" %}
         {% include "includes/take-new-snapshot.html" %}
       </ul>
     {% endif %}
   </div>
-
-  {% include "includes/breadcrumbs.html" %}
-
 </div>
 
 {% include "includes/show-swh-ids.html" %}
 
 <script>
   var snapshotContext = false;
   var branch = false;
   {% if snapshot_context %}
     snapshotContext = true;
     branch = "{{ snapshot_context.branch|escape }}";
   {% endif %}
   {% if available_languages %}
     $(".chosen-select").val("{{ language }}");
     $(".chosen-select").chosen().change(function(event, params) {
       updateLanguage(params.selected);
     });
   {% endif %}
   swh.browse.initSnapshotNavigation(snapshotContext, branch !== "None");
 </script>