Add Breadcrumbs

material-overrides/assets/stylesheets/kluster.css

@@ -695,6 +695,16 @@ input.md-search__input[placeholder="Search"]::placeholder {
   }
 }
 
+/* --- Breadcrumbs --- */
+.md-path__item:not(:first-child) {
+  align-items: center;
+}
+
+.md-path__link:hover {
+  color: var(--md-typeset-a-color);
+  text-decoration: underline;
+}
+
 /* --- Page actions --- */
 .page-actions {
   display: flex;
@@ -1268,4 +1278,4 @@ pre:hover > .md-code__nav {
 /* --- Cookie Consent --- */
 .md-consent__inner {
   background-color: var(--consent-bg-color);
-}
+}

material-overrides/main.html

@@ -37,6 +37,9 @@
 
 {%- block container -%}
   <div class="md-content" data-md-component="content">
+    {% if "navigation.path" in features %}
+      {% include "partials/path.html" %}
+    {% endif %}
     {% set class = "index-page" if not page.content and not page.is_homepage %}
     <article class="md-content__inner md-typeset {{ class }}">
       {% block content %}

material-overrides/partials/path.html

@@ -0,0 +1,15 @@
+{% import "partials/path-item.html" as item with context %}
+{% set hidden = "" %}
+{% if page.meta and page.meta.hide %}
+  {% set hidden = "hidden" if "path" in page.meta.hide %}
+{% endif %}
+{% set depth = page.ancestors | length %}
+{% if depth > 0 %}
+  <nav class="md-path" aria-label="{{ lang.t('nav') }}" {{ hidden }}>
+    <ol class="md-path__list">
+      {% for nav_item in page.ancestors | reverse %}
+        {{ item.render(nav_item) }}
+      {% endfor %}
+    </ol>
+  </nav>
+{% endif %}

mkdocs.yml

@@ -25,6 +25,7 @@ theme:
     - navigation.sections
     - toc.follow
     - content.action.edit
+    - navigation.path
   palette:
     - media: "(prefers-color-scheme: dark)"
       scheme: slate