feat: add a semantic way for creating a breadcrumb

docs/src/navs.html

@@ -116,6 +116,26 @@
 
           </footer>
         </article>
+
+        <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')}
@@ -123,5 +143,6 @@
     </div>
   </main>
   <script src="js/commons.min.js"></script>
-  </body>
+</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;