Allow non-string content as breadcrumb divider (#25581)

* Allow url(), attr(), none,... as breadcrumb divider
* Update breadcrumb divider docs

docs/4.0/components/breadcrumb.md

@@ -5,9 +5,7 @@ description: Indicate the current page's location within a navigational hierarch
 group: components
 ---
 
-## Overview
+## Example
-
-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).
 
 {% capture example %}
 <nav aria-label="breadcrumb">
@@ -33,6 +31,26 @@ Separators are automatically added in CSS through [`::before`](https://developer
 {% endcapture %}
 {% include example.html content=example %}
 
+## 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.

scss/_breadcrumb.scss

@@ -10,12 +10,15 @@
 
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item::before {
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
       display: inline-block; // Suppress underlining of the separator in modern browsers
       padding-right: $breadcrumb-item-padding;
-    padding-left: $breadcrumb-item-padding;
       color: $breadcrumb-divider-color;
-    content: "#{$breadcrumb-divider}";
+      content: $breadcrumb-divider;
+    }
   }
 
   // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built

scss/_variables.scss

@@ -873,7 +873,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;
 
 $breadcrumb-border-radius:          $border-radius !default;