In this article
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 framework:
| Variable | Description |
|---|---|
$font-size-breadcrumbs | The font size applied to the .breadcrumbs element. |
$font-weight-breadcrumbs | The font weight applied to the .breadcrumbs element. |
$border-radius-breadcrumbs | The border radius applied to the .breadcrumbs element. |
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.