| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Breadcrumb | |
| 4 | description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. | |
| 5 | group: components | |
| 6 | --- | |
| 7 | ||
| 8 | ## Example | |
| 9 | ||
| 10 | {% capture example %} | |
| 11 | <nav aria-label="breadcrumb"> | |
| 12 | <ol class="breadcrumb"> | |
| 13 | <li class="breadcrumb-item active" aria-current="page">Home</li> | |
| 14 | </ol> | |
| 15 | </nav> | |
| 16 | ||
| 17 | <nav aria-label="breadcrumb"> | |
| 18 | <ol class="breadcrumb"> | |
| 19 | <li class="breadcrumb-item"><a href="#">Home</a></li> | |
| 20 | <li class="breadcrumb-item active" aria-current="page">Library</li> | |
| 21 | </ol> | |
| 22 | </nav> | |
| 23 | ||
| 24 | <nav aria-label="breadcrumb"> | |
| 25 | <ol class="breadcrumb"> | |
| 26 | <li class="breadcrumb-item"><a href="#">Home</a></li> | |
| 27 | <li class="breadcrumb-item"><a href="#">Library</a></li> | |
| 28 | <li class="breadcrumb-item active" aria-current="page">Data</li> | |
| 29 | </ol> | |
| 30 | </nav> | |
| 31 | {% endcapture %} | |
| 32 | {% include example.html content=example %} | |
| 33 | ||
| 34 | ## Changing the separator | |
| 35 | ||
| 36 | 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 separator, you can use this: | |
| 37 | ||
| 38 | ```scss | |
| 39 | $breadcrumb-divider: quote(">"); | |
| 40 | ``` | |
| 41 | ||
| 42 | It's also possible to use a **base64 embedded SVG icon**: | |
| 43 | ||
| 44 | ```scss | |
| 45 | $breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); | |
| 46 | ``` | |
| 47 | ||
| 48 | The separator can be removed by setting `$breadcrumb-divider` to `none`: | |
| 49 | ||
| 50 | ```scss | |
| 51 | $breadcrumb-divider: none; | |
| 52 | ``` | |
| 53 | ||
| 54 | ## Accessibility | |
| 55 | ||
| 56 | 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. | |
| 57 | ||
| 58 | For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). | |
