diff --git a/_extensions/odoo/breadcrumb_list.html b/_extensions/odoo/breadcrumb_list.html
new file mode 100644
index 000000000..2c83929dc
--- /dev/null
+++ b/_extensions/odoo/breadcrumb_list.html
@@ -0,0 +1,23 @@
+{# warning: if doc structure change, these rules may have to change as well #}
+
+{# =====  VARIABLES  ====== #}
+{% set master_doc_short_name = 'User Doc' %}
+
+{% if pagename == master_doc %}
+    <li><a href="{{ pathto(master_doc) }}" class="active">{{ master_doc_short_name }}</a></li>
+{% else %}
+    {% for parent in parents %}
+        {% if loop.length > 1%}
+            {% if loop.first %}
+                <li><a href="{{ pathto(master_doc) }}">{{ master_doc_short_name }}</a></li>
+            {% else %}
+                {% if loop.index == 2 %}
+                    <li><a href="{{ parent.link|e }}">{{parent.title}}</a></li>
+                {% endif %}
+            {% endif %}
+        {% else %}
+            <li><a href="{{ pathto(master_doc) }}">{{ master_doc_short_name }}</a></li>
+        {% endif %}
+    {% endfor %}
+    <li class="active"><a href="#">{{ meta.get('main-title', title) }}</a></li>
+{% endif %}
\ No newline at end of file
diff --git a/_extensions/odoo/layout.html b/_extensions/odoo/layout.html
index b84b6715d..a7ed50780 100644
--- a/_extensions/odoo/layout.html
+++ b/_extensions/odoo/layout.html
@@ -162,55 +162,47 @@
     </div>
     <nav class="navbar o_sub_nav">
       <div class="container">
-        <span class="o_main_back">
-          {# warning: if doc structure change, these rules may have
-            to change as well #}
-            {% if pagename.count('/') %}
-            {# If the current document is an application's content,
-            link to the application root #}
-            {% set updoc, _ = pagename.split('/', 1) %}
-            {% else %}
-            {# otherwise link to master_doc #}
-            {% set updoc = master_doc %}
-            {% endif %}
-            <a href="{{ pathto(updoc) }}" class="mdi-navigation-arrow-back"></a>
-        </span>
-        <a href="#" class="navbar-header">
-          <span id="o_doc_title" class="o_app_name_title">{{ meta.get('main-title', title) }}</span>
-        </a>
-        <div class="collapse navbar-collapse">
-          <div class="call-to-action navbar-right">
+        <div class="navbar-header visible-xs">
+            <button type="button" class="navbar-toggle collapsed text-left btn-block" data-toggle="collapse" data-target="#o_sub-menu" aria-expanded="false">
+              Navigate
+              <span class="mdi-hardware-keyboard-arrow-down pull-right"></span>
+            </button>
+        </div>
+
+        <div class="collapse navbar-collapse" id="o_sub-menu">
+          <ol class="o_breadcrumb breadcrumb nav navbar-left">
+              {% block breadcrumb_desktop %}
+              {% include "breadcrumb_list.html" %}
+              {% endblock %}
+          </ol>
+
+          <div class="call-to-action navbar-right hidden-xs">
             <a href="http://www.odoo.com/trial" class="btn btn-primary">Start Now</a>
           </div>
-          {% if languages %}
-          <ul class="navbar-nav navbar-right nav">
-            <li class="languages dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown">
-                {{ language }}
-              </a>
-              <ul class="dropdown-menu" role="menu">
-                {% for name, url in languages %}
-                  <li><a href="{{ url }}">{{ name }}</a></li>
-                {% endfor %}
-              </ul>
-            </li>
+
+          <ul class="navbar-nav navbar-right nav o_sub_nav_actions">
+            {% if pagename != master_doc %}
+              <li class="divider"></li>
+            {% endif%}
+
+            {% block switchers_desktop %}
+            {% include "switchers_list.html" %}
+            {% endblock %}
           </ul>
-          {% endif %}
-          {% if versions %}
+
           <ul class="nav navbar-nav navbar-right">
-            <li class="versions dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown">
-                {{ version }}
-              </a>
-              <ul class="dropdown-menu" role="menu">
-                {% for name, url in versions %}
-                <li><a href="{{ url }}">{{ name }}</a></li>
-                {% endfor %}
-              </ul>
-            </li>
+            {% if languages or versions %}
+              <li class="divider"></li>
+            {% endif %}
+
+            {% block sub_menu_desktop %}
+            {% include "sub-menu_list.html" %}
+            {% endblock %}
+
+            {% if languages or versions %}
+              <li class="divider"></li>
+            {% endif %}
           </ul>
-          {% endif %}
-          {{ toctree(titles_only=True, maxdepth=2, includehidden=True, collapse=False, navbar='main') }}
         </div>
       </div>
     </nav>
diff --git a/_extensions/odoo/static/mixins.less b/_extensions/odoo/static/mixins.less
index 7df869070..7c11317f0 100644
--- a/_extensions/odoo/static/mixins.less
+++ b/_extensions/odoo/static/mixins.less
@@ -216,6 +216,104 @@
   @keyframes @name { @arguments(); }
 }
 
+//-- Documentation Dropdown style
+.o-doc-dropdown {
+    > a.dropdown-toggle {
+        padding: 0 5px 0 10px;
+        &:after {
+            .mdi-icon( "\e7c1");
+
+            @media screen and (max-width: @screen-xs-max) {
+                font-size: 1.5em
+            }
+        }
+    }
+
+    &.open {
+        z-index: 1;
+        position: relative;
+        background-color: @gray-light;
+        color: @header-link-normal;
+
+        @media screen and (min-width: @screen-sm-min){
+            background-color: @w-header-white;
+        }
+
+        .dropdown-toggle {
+            color: @header-link-normal;
+
+            &:hover {
+                color: @headings-color;
+            }
+        }
+
+        .dropdown-menu {
+            margin-top: 0;
+            border: none;
+            border-radius: 0;
+            text-align: left;
+            min-width: 100%;
+            background-color: @w-header-white;
+            padding-bottom: @w-header-height/4;
+            .deep-1();
+
+            > li > a {
+                font-size: 12px;
+                display: block;
+                color: @header-link-normal;
+                float: none;
+                text-transform: none;
+                font-weight: @fw_medium;
+
+                @media screen and (max-width: @screen-xs-max) {
+                    padding-left: 10px;
+                }
+            }
+            > li.active > a {
+                color: white;
+                background-color: desaturate(@brand-primary, 40%);
+            }
+
+            @media screen and (max-width: @screen-xs-max) {
+                position: static;
+            }
+            @media screen and (min-width: @screen-sm-min) {
+                background-color: @w-header-white;
+            }
+        }
+    }
+
+    &.o_dropdown_mobile_nav {
+        margin-left: 0;
+
+        > .dropdown-toggle {
+            &:after {
+                .o-position-absolute(0, 0);
+            }
+        }
+
+        .o_breadcrumb_dropdown_menu > li{
+            > a {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            > a:before {
+                content: "|";
+                margin-right: 0.5em;
+            }
+            &:nth-child(1) > a:before {
+                display: none;
+            }
+            &:nth-child(2) > a:before {
+                padding-left: 0.5em;
+            }
+            &:nth-child(3) > a:before {
+                padding-left: 1em;
+            }
+        }
+    }
+}
 
 
 // Shadows
diff --git a/_extensions/odoo/static/style.less b/_extensions/odoo/static/style.less
index f4c8bf051..448118360 100644
--- a/_extensions/odoo/static/style.less
+++ b/_extensions/odoo/static/style.less
@@ -22,17 +22,130 @@
 // The following rules are specific for the documentation website.
 
 .o_main_header {
-
-  .mdi-navigation-menu {
-    padding: 13px;
-  }
+  @o-sub-inner-h:  @w-sub-nav-height - 2;
 
   &.o_mobile_menu_opened .mdi-navigation-menu {
     background-color: @footer-bg-color;
     color: @gray-lighter;
   }
 
-  .o_sub_nav {
+  > .o_sub_nav #o_sub-menu .o_breadcrumb {
+
+    @media screen and (min-width: @screen-sm-min) {
+      background-color: transparent;
+      padding: 0;
+      margin: 0 0 0 -15px;
+      height: @o-sub-inner-h;
+      line-height: @o-sub-inner-h;
+    }
+
+    > li {
+      display: block;
+      &, > a {
+        height: 30px;
+        line-height: 2;
+      }
+
+      &:before {
+        font-weight: @fw_bold;
+        float: left;
+        padding: 0;
+        margin-right: -1px;
+        display: none;
+      }
+
+      @media screen and (min-width: @screen-sm-min) {
+        margin-left: 0;
+        margin-right: -1px;
+        height: @o-sub-inner-h;
+        line-height: @o-sub-inner-h;
+        display: inline-block;
+
+        &:before {
+          display: block;
+        }
+
+        > a {
+          padding: 0;
+          height: @o-sub-inner-h;
+          line-height: @w-sub-nav-height;
+          letter-spacing: -0.1px;
+          word-spacing: -1px;
+          font-size: 0.9em;
+          display: inline-block;
+          height: 100%;
+          max-width: 80px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        &:last-child > a {
+          max-width: 170px;
+        }
+      }
+
+      @media screen and (min-width: 1980px) {
+        > a {
+          max-width: 120px;
+        }
+      }
+
+      @media screen and (min-width: @screen-lg-min) {
+        &:last-child > a {
+          max-width: none;
+        }
+      }
+
+      @media screen and (max-width: @screen-xs-max) {
+        > a {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        > a:before {
+          content: "|";
+          margin-right: 0.5em;
+        }
+        &:nth-child(1) > a:before {
+          display: none;
+        }
+        &:nth-child(2) > a:before {
+          padding-left: 0.5em;
+        }
+        &:nth-child(3) > a:before {
+          padding-left: 1em;
+        }
+      }
+    }
+  }
+
+  &.index {
+    @media screen and (max-width: @screen-xs-max ){
+       > .o_sub_nav #o_sub-menu .o_breadcrumb {
+         display: none;
+       }
+    }
+  }
+
+  > .o_sub_nav {
+    border-radius: 0;
+
+    .navbar-toggle {
+      padding: 0 15px;
+      margin: 0;
+      height: @o-sub-inner-h;
+      background-color: @gray-lighter;
+
+      span {
+        line-height: @o-sub-inner-h;
+      }
+
+      &.collapsed {
+        background-color: @w-header-white;
+      }
+    }
+
     .collapse .nav {
       margin-right: 0;
       margin-bottom: 0;
@@ -45,83 +158,96 @@
         margin: 0;
 
         > a {
-          padding:0 10px;
+          padding:0 0 0 10px;
+        }
+
+        &.divider {
+          height: auto;
+          line-height: 1;
+          border-bottom: 1px solid @gray-light;
+          padding: 4px 0px 5px;
         }
 
         &.dropdown {
-          > a.dropdown-toggle {
-            padding: 0 15px 0 10px;
+         .o-doc-dropdown();
+        }
+      }
+    }
 
-            &:after {
-              .mdi-icon("\e7c1");
-              .o-position-absolute(0,0);
-            }
-          }
+    > .container > .collapse > .nav,
+    > .container .o_breadcrumb {
+       > li > a {
+        @media screen and (min-width: @screen-sm-min) and ( max-width: @screen-sm-max ) {
+          font-size: 10px;
+          font-weight: @fw_semibold;
+        }
+      }
+    }
 
-          &.open {
-            background-color: @w-header-white;
-            color: @header-link-normal;
+    li.dropdown {
+      .o-doc-dropdown();
+    }
+  }
 
-            .dropdown-toggle {
+
+  &.o_inverted:not(.o_scrolled) {
+    @media (max-width: @screen-xs-max) {
+      .o_sub_nav {
+        display: block;
+        margin-bottom: 0;
+
+        .nav {
+          margin: 0 0 0 -8px;
+
+          > li > a{
+            color: @text-color;
+
+            &:hover, &:focus {
               color: @header-link-normal;
-              &:hover {
-                color: @headings-color;
-              }
-            }
-
-            .dropdown-menu {
-              background-color: @w-header-white;
-              margin-top: 0;
-              border: none;
-              border-radius: 0;
-              text-align: left;
-              min-width: 100%;
-              padding-bottom: @w-header-height/4;
-              .deep-1();
-
-              > li > a {
-                font-size     : 12px;
-                display       : block;
-                color         : @header-link-normal;
-                float         : none;
-                text-transform: none;
-                font-weight   : normal;
-              }
             }
           }
         }
       }
     }
 
-    .o_main_back {
-      float: left;
-      height: 35px;
-      line-height: 50px;
-      a {
-        color: white;
-      }
-    }
+    .o_sub_nav_actions {
+      margin-left: 10px;
 
-    #o_doc_title {
-      padding-left: 10px;
-      display: inline-block;
-      .transform-origin(0 50%);
-      .translate(50px, 0);
-      .opacity(0);
-      .transition(all 0.3s);
+      > li {
+        background: fade(@gray-lightest, 10%);
+        margin-right: 1px;
+
+        &:last-child {
+          margin-right: 0
+        }
+      }
     }
   }
 
   &.o_scrolled {
     .o_sub_nav {
-      .o_main_back a{
-        color: @odoo-brand-primary;
-      }
       #o_doc_title {
         .opacity(1);
         .translate(0, 0);
         .transition(~'opacity 1s, transform 0.3s');
       }
+
+      .o_sub_nav_actions {
+        margin-left: 10px;
+
+        &:first-of-type {
+          margin-right: -25px;
+        }
+
+        > li {
+          background: fade(@gray, 10%);
+          margin-right: 1px;
+
+          &:last-child {
+            margin-right: 0
+          }
+        }
+      }
     }
   }
 }
diff --git a/_extensions/odoo/sub-menu_list.html b/_extensions/odoo/sub-menu_list.html
new file mode 100644
index 000000000..16677c10e
--- /dev/null
+++ b/_extensions/odoo/sub-menu_list.html
@@ -0,0 +1,8 @@
+{# note: if odoo.com/page/docs sub-menu's structure change, these links have to change as well #}
+
+<li><a href="http://www.odoo.com/documentation/user/9.0/index.html">User</a></li>
+<li><a href="http://www.odoo.com/documentation/9.0/index.html">Developer</a></li>
+<li><a href="http://www.odoo.com/documentation/9.0/api_integration.html">API</a></li>
+<li><a href="http://www.odoo.com/documentation/9.0/setup/install.html">Installation</a></li>
+<li><a href="http://www.odoo.com/page/odoo-white-paper">White Papers</a></li>
+<li><a href="http://www.odoo.com/page/legal">Legal</a></li>
diff --git a/_extensions/odoo/switchers_list.html b/_extensions/odoo/switchers_list.html
new file mode 100644
index 000000000..1e90a61ae
--- /dev/null
+++ b/_extensions/odoo/switchers_list.html
@@ -0,0 +1,25 @@
+{% if languages %}
+<li class="languages dropdown">
+    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
+        {{ language }}
+    </a>
+    <ul class="dropdown-menu" role="menu">
+        {% for name, url in languages %}
+            <li><a href="{{ url }}">{{ name }}</a></li>
+        {% endfor %}
+    </ul>
+</li>
+{% endif %}
+
+{% if versions %}
+<li class="versions dropdown">
+    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
+        {{ version }}
+    </a>
+    <ul class="dropdown-menu" role="menu">
+        {% for name, url in versions %}
+            <li><a href="{{ url }}">{{ name }}</a></li>
+        {% endfor %}
+    </ul>
+</li>
+{% endif %}