diff options
| author | XhmikosR <[email protected]> | 2021-08-04 18:41:51 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-08-04 18:41:51 +0300 |
| commit | f20fece3a8cdd0e76a42c2737524b7652bf54d26 (patch) | |
| tree | 83e62cc954b17a8bc21cd5975bfd88da721793d1 /site/content/docs/5.0/components/breadcrumb.md | |
| parent | 7fcc2f4d526ff774a0a7de6b624a607e5ba47fb9 (diff) | |
| download | bootstrap-5.1.0.tar.xz bootstrap-5.1.0.zip | |
Prepare v5.1.0. (#34674)v5.1.0
Diffstat (limited to 'site/content/docs/5.0/components/breadcrumb.md')
| -rw-r--r-- | site/content/docs/5.0/components/breadcrumb.md | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md deleted file mode 100644 index 9143e7612..000000000 --- a/site/content/docs/5.0/components/breadcrumb.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -layout: docs -title: Breadcrumb -description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. -group: components -toc: true ---- - -## Example - -Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired. - -{{< example >}} -<nav aria-label="breadcrumb"> - <ol class="breadcrumb"> - <li class="breadcrumb-item active" aria-current="page">Home</li> - </ol> -</nav> - -<nav 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> - </ol> -</nav> - -<nav aria-label="breadcrumb"> - <ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item"><a href="#">Library</a></li> - <li class="breadcrumb-item active" aria-current="page">Data</li> - </ol> -</nav> -{{< /example >}} - -## Dividers - -Dividers 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 modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time. - -{{< example >}} -<nav style="--bs-breadcrumb-divider: '>';" 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> - </ol> -</nav> -{{< /example >}} - -When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: - -```scss -$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. - -{{< example >}} -<nav style="--bs-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");" 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> - </ol> -</nav> -{{< /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"); -``` - -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;`. - -{{< example >}} -<nav style="--bs-breadcrumb-divider: '';" 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> - </ol> -</nav> -{{< /example >}} - - -```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. - -For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). - -## Sass - -### Variables - -{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} |
