Add template and styles for breadcrumbs

custom/styles/base.css

@@ -119,6 +119,38 @@ main {
     }
   }
   .button { margin-top: 1.3rem; justify-self: start }
+  
+  /* BREADCRUMB */
+  .breadcrumb {
+    display: grid;
+    grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.8rem, 1fr);
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.85em;
+    ol {
+      grid-column: 2;
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        display: inline-flex;
+        align-items: center;
+        &:not(:last-child)::after {
+          content: '›';
+          margin: 0 0.6rem;
+          color: var(--color-grey);
+          font-size: 1.2em;
+        }
+        a {
+          color: var(--color-green);
+          text-decoration: none;
+          &:hover { color: var(--color-blue) }
+        }
+      }
+    }
+  }
 }
 
 table {

custom/templates/page.php

@@ -1,3 +1,15 @@
+<?php if (!empty($ctx->breadcrumbs) && empty($ctx->get('hide_breadcrumb'))): ?>
+<nav class="breadcrumb" aria-label="Breadcrumb">
+    <ol>
+        <?php foreach ($ctx->breadcrumbs as $crumb): ?>
+        <li>
+            <a href="<?= htmlspecialchars($crumb['url']) ?>"><?= htmlspecialchars($crumb['title']) ?></a>
+        </li>
+        <?php endforeach; ?>
+    </ol>
+</nav>
+<?php endif; ?>
+
 <article>
 <?= $content ?>