Breadcrumbs

Breadcrumbs provide a summary of path steps for a given piece of content, allowing visitors to easily find their way around the help center.

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 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.

Questions or feedback about this article? Let us know