From 91e7adc5b81f208a7e10ac4f2884eef33171820b Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 7 Feb 2018 20:09:50 +0100
Subject: [PATCH 1/4] Allow url(), attr(), none,... as breadcrumb divider

---
 scss/_breadcrumb.scss | 13 ++++++++-----
 scss/_variables.scss  |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 25b9d85a1285..460f0016704c 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -10,12 +10,15 @@
 
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item::before {
-    display: inline-block; // Suppress underlining of the separator in modern browsers
-    padding-right: $breadcrumb-item-padding;
+  + .breadcrumb-item {
     padding-left: $breadcrumb-item-padding;
-    color: $breadcrumb-divider-color;
-    content: "#{$breadcrumb-divider}";
+
+    &::before {
+      display: inline-block; // Suppress underlining of the separator in modern browsers
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: $breadcrumb-divider;
+    }
   }
 
   // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9825b080832a..b83001e85375 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -845,7 +845,7 @@ $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     $gray-200 !default;
 $breadcrumb-divider-color:          $gray-600 !default;
 $breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                "/" !default;
+$breadcrumb-divider:                quote("/") !default;
 
 
 // Carousel

From cbdc23b2addcc13d702f5e057cb84a9be5e5bef1 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 12 Feb 2018 21:52:45 +0100
Subject: [PATCH 2/4] #25581: update breadcrumb separator docs

---
 docs/4.0/components/breadcrumb.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 2cbcc17b9e10..806bc76a6119 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -7,7 +7,7 @@ group: components
 
 ## Overview
 
-Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
+Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider` (e.g. to `quote(">")`). The [quote](http://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string. The separator can be removed by setting `$breadcrumb-divider` to `none`.
 
 {% example html %}
 <nav aria-label="breadcrumb">

From e290d26823cf9f3df1c9bd595792df3863e11075 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 20 Feb 2018 20:36:30 +0100
Subject: [PATCH 3/4] Update breadcrumb divider docs

---
 docs/4.0/components/breadcrumb.md | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 806bc76a6119..90b17efd3f42 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -5,9 +5,7 @@ description: Indicate the current page's location within a navigational hierarch
 group: components
 ---
 
-## Overview
-
-Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider` (e.g. to `quote(">")`). The [quote](http://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string. The separator can be removed by setting `$breadcrumb-divider` to `none`.
+## Example
 
 {% example html %}
 <nav aria-label="breadcrumb">
@@ -32,6 +30,24 @@ Separators are automatically added in CSS through [`::before`](https://developer
 </nav>
 {% endexample %}
 
+## Changing the separator
+Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](http://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string, so if you want `>` as seperator, you can use this:
+ 
+```scss
+$breadcrumb-divider: quote(">");
+```
+It's also possible to use a **base64 embedded SVG icon**:
+
+```scss
+$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
+```
+
+The separator can be removed by setting `$breadcrumb-divider` to `none`:
+
+```scss
+$breadcrumb-divider: none;
+```
+
 ## Accessibility
 
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.

From e490d106f46d359ee551a8771387841a89b2aab4 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Mon, 12 Mar 2018 22:10:34 +0200
Subject: [PATCH 4/4] Update breadcrumb.md

---
 docs/4.0/components/breadcrumb.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 90b17efd3f42..46200f3d54da 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -31,11 +31,13 @@ group: components
 {% endexample %}
 
 ## Changing the separator
+
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](http://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string, so if you want `>` as seperator, you can use this:
  
 ```scss
 $breadcrumb-divider: quote(">");
 ```
+
 It's also possible to use a **base64 embedded SVG icon**:
 
 ```scss