From 8049be9ffafd43805997d97839f2d6881e42e460 Mon Sep 17 00:00:00 2001
From: JelmerVeen <paluke_@hotmail.com>
Date: Tue, 25 Jan 2022 21:13:14 +0100
Subject: [PATCH] feat: add a semantic way for creating a breadcrumb

---
 docs/src/navs.html            | 41 ++++++++++++++++++++++++++---------
 scss/components/_nav.scss     | 18 +++++++++++++++
 scss/content/_typography.scss |  2 +-
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/docs/src/navs.html b/docs/src/navs.html
index 03d2f54d..b4619e85 100644
--- a/docs/src/navs.html
+++ b/docs/src/navs.html
@@ -114,14 +114,35 @@
   &lt;/<b>nav</b>&gt;
 &lt;/<b>aside</b>&gt;</code></pre>
 
-            </footer>
-          </article>
-        </section>
+          </footer>
+        </article>
 
-        ${require('./_footer.html')}
-        
-      </div>
-    </main>
-    <script src="js/commons.min.js"></script>
-  </body>
-</html>
+        <p>With <code><b>role="breadcrumb"</b></code>, you can turn a nav into a breadcrumb.</p>
+
+        <article aria-label="Breadcrumb nav example">
+          <nav role="breadcrumb">
+            <a href="#">First link</a>
+            <a href="#">Second link</a>
+            Last link
+          </nav>
+
+          <footer class="code">
+
+            <pre><code>&lt;<b>nav</b> <i>role</i>=<u>"breadcrumb"</u>&gt;
+  &lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;
+  &lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;
+  Last link
+&lt;/<b>nav</b>&gt;</code></pre>
+          </footer>
+        </article>
+
+      </section>
+
+      ${require('./_footer.html')}
+
+    </div>
+  </main>
+  <script src="js/commons.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index 6b0f8762..0dbac416 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -51,6 +51,24 @@ nav {
       text-decoration: none;
     }
   }
+
+  &[role="breadcrumb"] {
+    align-items: center;
+    justify-content: left;
+
+    font-size: 1.2rem;
+
+    & a {
+      padding-right: 1rem;
+      text-decoration: none;
+
+      &::after {
+        content: " / ";
+        color: var(--color);
+        font-size: 1.5rem;
+      }
+    }
+  }
 }
 
 // Vertical Nav
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index 9fc5883b..bd58466d 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -68,7 +68,7 @@ ul {
 
 // Links
 // 1. Remove the gray background on active links in IE 10
-a {
+a:not(::after) {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;