From 568553394d0a8b34668a75c9839a0f1f426469b2 Mon Sep 17 00:00:00 2001 From: Dimitri Staessens Date: Sun, 6 Oct 2019 21:10:46 +0200 Subject: theme: Switch to docsy theme --- .../site/docs/4.1/components/breadcrumb.md | 58 ++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 themes/docsy/assets/vendor/bootstrap/site/docs/4.1/components/breadcrumb.md (limited to 'themes/docsy/assets/vendor/bootstrap/site/docs/4.1/components/breadcrumb.md') diff --git a/themes/docsy/assets/vendor/bootstrap/site/docs/4.1/components/breadcrumb.md b/themes/docsy/assets/vendor/bootstrap/site/docs/4.1/components/breadcrumb.md new file mode 100644 index 0000000..4cc7b3d --- /dev/null +++ b/themes/docsy/assets/vendor/bootstrap/site/docs/4.1/components/breadcrumb.md @@ -0,0 +1,58 @@ +--- +layout: docs +title: Breadcrumb +description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. +group: components +--- + +## Example + +{% capture example %} + + + + + +{% 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](https://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 `