Usage
Breadcrumb markup is provided automatically by the {{breadcrumbs}} helper on many pages, but may be generated manually using {{path_steps}} collections when available.
<nav aria-label="breadcrumb">
<ol class="breadcrumbs">
<li title="Help Center"><a href="...">Help Center</a></li>
<li title="Getting started">Getting started</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumbs">
<li title="Help Center"><a href="...">Help Center</a></li>
<li title="Getting started"><a href="...">Getting started</a></li>
<li title="Introduction"><a href="...">Introduction</a></li>
</ol>
</nav>For more information, please refer to the Zendesk Helpers page.
Customization
Because the breadcrumbs markup cannot be edited directly, the following Sass variables are available in the theming framework:
| Variable | Description |
|---|---|
$font-size-breadrcrumbs | The font size of the .breadcrumbs element. |
$font-weight-breadrcrumbs | The font weight of the .breadcrumbs element. |
$content-breadcrumb-divider | The divider to use between each breadcrumb item (default: "/"). |
$padding-breadcrumb-divider | The padding applied to the divider between each breadcrumb element. |
$color-breadcrumb-divider | The color of each breadcrumb divider. |
$color-breadcrumb-item | The color of each breadcrumb item. |
$padding-breadcrumb-link | The padding applied to each breadcrumb link. |
$color-breadcrumb-link | The color of each breadcrumb link. |
$color-breadcrumb-link-hover | The color of each breadcrumb link applied on hover. |
$bg-color-breadrcrumb-link | The background color of each breadcrumb link. |
Separators are automatically added in CSS through ::before and content. They can be changed by overriding the $breadcrumb-divider Sass variable in your theme. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:
$content-breadcrumb-divider: quote(">");
Alternatives include using a SVG image data URI or removing the divider completely by setting a value of none.