breadcrumb

pages/_data/docs.yml

@@ -1,6 +1,7 @@
 - page: alerts
 - page: avatars
 - page: badges
+- page: breadcrumb
 - page: buttons
 - page: cards
 - page: carousel

pages/_docs/breadcrumb.md

@@ -0,0 +1,17 @@
+---
+title: Breadcrumb
+menu: docs.breadcrumb
+---
+
+## Default markup
+
+{% example %}
+{% include ui/breadcrumb.html %}
+{% endexample %}
+
+## Breadcrumb variations
+
+{% example %}
+{% include ui/breadcrumb.html class="breadcrumb-dots" %}
+{% include ui/breadcrumb.html class="breadcrumb-arrows" %}
+{% endexample %}

pages/_docs/steps.md

@@ -1,6 +1,7 @@
 ---
 title: Steps
 menu: docs.steps
+new: true
 ---
 
 Steps are progress indicators of a sequence of task steps.

pages/_includes/ui/breadcrumb.html

@@ -0,0 +1,10 @@
+{% assign pages = include.pages | default: "Home,Library,Data" | split: "," %}
+<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}">
+   {% for page in pages %}
+   {% if forloop.last %}
+   <li class="breadcrumb-item active" aria-current="page">{{ page }}</li>
+   {% else %}
+   <li class="breadcrumb-item"><a href="#">{{ page }}</a></li>
+   {% endif %}
+   {% endfor %}
+</ol>

scss/ui/_breadcrumbs.scss

@@ -1,4 +1,19 @@
 .breadcrumb {
+  margin: 0;
   padding: 0;
   background: transparent;
 }
+
+.breadcrumb-dots {
+  .breadcrumb-item + .breadcrumb-item::before {
+    content: '·';
+  }
+}
+
+.breadcrumb-arrows {
+  .breadcrumb-item + .breadcrumb-item::before {
+    content: $icon-fe-chevron-right;
+    font-family: $font-icons;
+    vertical-align: bottom;
+  }
+}