diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss
index 17b953e..c4d6e52 100644
--- a/src/scss/_drawing.scss
+++ b/src/scss/_drawing.scss
@@ -6,6 +6,7 @@
  */
 
 @import 'components/buttons';
+@import 'components/breadcrumb';
 @import 'components/navbars';
 @import 'components/pagination';
 @import 'components/cards';
diff --git a/src/scss/components/_breadcrumb.scss b/src/scss/components/_breadcrumb.scss
new file mode 100644
index 0000000..b90a542
--- /dev/null
+++ b/src/scss/components/_breadcrumb.scss
@@ -0,0 +1,43 @@
+/* ------------------ BREADCRUMB ------------------- */
+
+ul.breadcrumb, ol.breadcrumb, .breadcrumb {
+    padding-top: 0em;
+    background-color:transparent;
+    margin: 0;
+    padding-bottom:$lineheight;
+    @include li-flex();
+}
+
+.breadcrumb li.breadcrumb-item {
+    padding:0;
+    margin:0!important;
+    &:before {
+        display:none;
+    }
+
+    a, & > span {
+        display:inline-block;
+        @include button($button-large);
+        @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
+        margin:0 $breadcrumb_margin 0 $breadcrumb_margin;
+
+        &.active {
+            @include button-fullcontrol($color-primary, $color-primary, $color-font-light);
+        }
+    }
+
+    &:not(:first-child) a, &:not(:first-child) > span {
+      border-top-left-radius: 0;
+      border-bottom-left-radius:0;
+      &:before {
+        content: " "!important;
+        border-left:1px solid rgba(0,0,0,0.2);
+      }
+    }
+
+    &:not(:last-child) a, &:not(:last-child) > span {
+      border-top-right-radius: 0;
+      border-bottom-right-radius:0;
+    }
+
+}
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index 3b424fe..2a33c5a 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -145,49 +145,6 @@ $grouped-test: $button-large/1.5 - 0.05rem ;
   }
 }
 
-/* ------------------ BREADCRUMB ------------------- */
-
-ul.breadcrumb, ol.breadcrumb, .breadcrumb {
-    padding-top: 0em;
-    background-color:transparent;
-    margin: 0;
-    padding-bottom:$lineheight;
-}
-
-.breadcrumb li.breadcrumb-item {
-    padding:0;
-    margin:0!important;
-    &:before {
-        display:none;
-    }
-
-    a, & > span {
-        display:inline-block;
-        @include button($button-large);
-        @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
-        margin:0 $breadcrumb_margin 0 $breadcrumb_margin;
-
-        &.active {
-            @include button-fullcontrol($color-primary, $color-primary, $color-font-light);
-        }
-    }
-
-    &:not(:first-child) a, &:not(:first-child) > span {
-      border-top-left-radius: 0;
-      border-bottom-left-radius:0;
-      &:before {
-        content: " "!important;
-        border-left:1px solid rgba(0,0,0,0.2);
-      }
-    }
-
-    &:not(:last-child) a, &:not(:last-child) > span {
-      border-top-right-radius: 0;
-      border-bottom-right-radius:0;
-    }
-
-}
-
 // COLORIZE BUTTONS
 
 .btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {