From a55d1b27c5ca0f42208e46b1811e6667563eb784 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 2 Apr 2018 03:15:57 +0200
Subject: 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 | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'docs')

diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 9710f9a56..6a64c1285 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).
+## 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.
-- 
cgit v1.2.3