feat: add a semantic way for creating a breadcrumb

docs/src/navs.html

@@ -114,14 +114,35 @@
   &lt;/<b>nav</b>&gt;
 &lt;/<b>aside</b>&gt;</code></pre>
 
-            </footer>
+          </footer>
-          </article>
+        </article>
-        </section>
 
-        ${require('./_footer.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>
 
-      </div>
-    </main>
-    <script src="js/commons.min.js"></script>
-  </body>
 </html>

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

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;