add breadcrumb code

4 files changed, 80 insertions, 0 deletions

diff --git a/demo/index.html b/demo/index.html
index 04909b1..18c3d5c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -329,6 +329,30 @@
                 </div>
             </div>
         </section>
+        <section class="breadcrumbs">
+            <header class="text-center"><h4>breadcrumbs</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <ul class="breadcrumb">
+                        <li>
+                            <a href="#">
+                                Home
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                Profile
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                Change avatar
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index 884ce1c..98cd410 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1123,6 +1123,28 @@ textarea.form-input {
   border-bottom: 1px solid #efefef;
   margin: .5rem;
 }
+.breadcrumb {
+  list-style: none;
+  margin: .5rem 0;
+  padding: 1.2rem;
+}
+.breadcrumb li {
+  display: inline-block;
+  margin: 0;
+}
+.breadcrumb li a {
+  text-decoration: none;
+}
+.breadcrumb li:last-child,
+.breadcrumb li:last-child a {
+  color: #666666;
+  pointer-events: none;
+}
+.breadcrumb li:not(:last-child)::after {
+  content: "/";
+  padding: 0 .4rem;
+  color: #c5c5c5;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/buttons.less b/src/buttons.less
index e04aaa9..43e4e7d 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -166,6 +166,10 @@ button {
     }
   }
 
+  .btn-groups {
+
+  }
+
   // TODO: Button with icons
   // TODO: Button groups
 }
\ No newline at end of file
diff --git a/src/navigation.less b/src/navigation.less
index 8fbcc0f..2e94d30 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -1 +1,31 @@
 // Navigation
+.breadcrumb {
+  list-style: none;
+  margin: .5rem 0;
+  padding: 1.2rem;
+
+  li {
+    display: inline-block;
+    margin: 0;
+
+    a {
+      text-decoration: none;
+    }
+
+    &:last-child {
+      &,
+      a {
+        color: lighten(@body-font-color, 20%);
+        pointer-events: none;
+      }
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: "/";
+        padding: 0 .4rem;
+        color: @control-color;
+      }
+    }
+  }
+}