Sections

Content

Layout

Navigation

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.

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.