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: [PATCH] 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 +++++++++++++++++++++---
scss/_breadcrumb.scss | 13 ++++++++-----
scss/_variables.scss | 2 +-
3 files changed, 30 insertions(+), 9 deletions(-)
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 9710f9a56c..6a64c12856 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.
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index b8f234fd9e..be30950690 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 c08c2b0464..583f8b96de 100644
--- 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;
--
GitLab