Added breadcrumbs in header

mkdocs.yml

@@ -27,6 +27,7 @@ site_url: http://squidfunk.github.io/mkdocs-material/
 # Repository
 repo_name: squidfunk/mkdocs-material
 repo_url: https://github.com/squidfunk/mkdocs-material
+edit_uri: edit/master/docs/
 
 # Copyright
 copyright: 'Copyright &copy 2016 Martin Donath'

src/assets/stylesheets/layout/_header.scss

@@ -100,6 +100,23 @@
     line-height: 4.8rem;
   }
 
+  // Parent page title
+  &__parent {
+    color: $md-color-white--light;
+
+    // Ancestor separator
+    &::after {
+      display: inline;
+      color: $md-color-white--lighter;
+      content: "/";
+    }
+
+    // [mobile portrait -]: Hide on very small screens
+    @include break-to-device(mobile portrait) {
+      display: none;
+    }
+  }
+
   // Repository containing source
   &__source {
     display: none;

src/assets/stylesheets/layout/_search.scss

@@ -34,8 +34,8 @@
 
   // [tablet landscape +]: Header-embedded search
   @include break-from-device(tablet landscape) {
+    margin-right: 2.8rem;
     padding: 0.4rem;
-    padding-right: 3.2rem;
   }
 
   // Search modal overlay

src/base.html

@@ -153,8 +153,9 @@
               {% block content %}
 
                 <!-- Edit button, if URL was defined -->
-                {% if edit_uri %}
+                {% if config.edit_uri %}
-                  <a class="md-button md-button--edit" href="{{ edit_uri }}">
+                  <a class="md-button md-button--edit"
+                      href="{{ page.edit_url }}">
                     Edit
                   </a>
                 {% endif %}

src/partials/header.html

@@ -46,7 +46,14 @@
       <!-- Header title -->
       <div class="md-flex__cell md-flex__cell--stretch">
         <span class="md-flex__ellipsis md-header-nav__title">
-          {%- block site_name -%}
+          {% block site_name %}
+            {% if page %}
+              {% for parent in page.ancestors %}
+                <span class="md-header-nav__parent">
+                  {{ parent.title }}
+                </span>
+              {% endfor %}
+            {% endif %}
             {{ page.title | default(config.site_name, true) }}
           {% endblock %}
         </span>
@@ -54,9 +61,9 @@
 
       <!-- Button to open search dialogue -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        {%- block search_box -%}
+        {% block search_box %}
-          <label class="md-icon md-header-nav__icon md-header-nav__icon--search"
+          <label class="md-icon md-header-nav__icon
-              for="search">
+                md-header-nav__icon--search" for="search">
             search
           </label>
 
@@ -68,7 +75,7 @@
       <!-- Repository containing source -->
       <div class="md-flex__cell md-flex__cell--shrink">
         <div class="md-header-nav__source">
-          {%- block repo -%}
+          {% block repo %}
             {% if config.repo_url %}
               {% include "partials/source.html" %}
             {% endif %}

src/partials/source.html

@@ -43,6 +43,6 @@
 <a href="{{ config.repo_url }}" title="Go to repository"
     class="md-source {{ repo_icon }}" data-md-source="{{ repo_type }}">         <!-- use <> for custom / private repo -->
   <div class="md-source__repository">
-    {{ repo_name }}
+    {{ config.repo_name }}
   </div>
 </a>