Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Breadcrumb docs: drop confusing currentColor and add new callout #35434

Merged
merged 6 commits into from Feb 1, 2022
Merged

Breadcrumb docs: drop confusing currentColor and add new callout #35434

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
84b07da
docs(breadcrumb): drop currentColor & new callout
ffoodd Nov 30, 2021
9e4f72b
Update breadcrumb.md
XhmikosR Nov 30, 2021
08b24c0
Update breadcrumb.md
XhmikosR Nov 30, 2021
87809eb
Merge branch 'main' into main-fod-breadcrumb-docs
XhmikosR Dec 15, 2021
996d69a
docs(links): harmonize refs for SVG URL encoding
ffoodd Jan 11, 2022
eb74bdd
Merge branch 'main' into main-fod-breadcrumb-docs
XhmikosR Feb 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 9 additions & 2 deletions site/content/docs/5.1/components/breadcrumb.md
View file
Open in desktop
Expand Up @@ -54,8 +54,15 @@ $breadcrumb-divider: quote(">");

It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.


{{< callout info >}}
### Using embedded SVG

Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
{{< /callout >}}

{{< example >}}
<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
Expand All @@ -64,7 +71,7 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
{{< /example >}}

```scss
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
```

You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
Expand Down