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

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

diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 9710f9a56ca9ec189f6a0777ddcc2e7588f212b3..6a64c12856b552cd2bbdf9f453029fa32b7ab1ce 100644 (file)
--- 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).
+## Example
 
 {% 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.

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index b8f234fd9eb8a850287b71406a12904c4da344cf..be309506903bea488037819734c641b657ef5c48 100644 (file)
--- 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 c08c2b0464bc0ef109dcfef1426c613755554f94..583f8b96de3dc2066f184795349eb67acf63e56c 100644 (file)
--- a/scss/_variables.scss
+++ b/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;