Breadcrumbs

Breadrcumbs are a simple navigation element that allow visitors to move up the content hierarchy.

Breadcrumb links are provided by the Zendesk {{breadcrumbs}} helper, but changes are possible using HTML and CSS.

Standard breadcrumbs
View code
{{breadcrumbs}}

Wrapping the breadcrumbs markup in a container with utilities can change its appearance:

Breadcrumbs in pill-style container
View code
<div class="inline-flex align-items-center font-size-md font-medium bg-gray-100 border rounded px-5 py-3">
  <div class="-mb-4">
    {{breadcrumbs}}
  </div>
</div>

A little custom CSS can be used to change the appearance of the links.

Breadcrumbs in pill-style container
View code
<div class="breadcrumb-links inline-block border border-radius bg-white overflow-hidden my-4">
  {{breadcrumbs}}
</div>
<style>
  .breadcrumb-links .breadcrumbs {
    display: inline-flex;
    margin-bottom: 0;
  }
  .breadcrumb-links li {
    position: relative;
    padding: 0.75em 0.75em 0.75em 1.25em;
    background: #fff;
    outline: none;
    text-decoration: none;
    transition: background 0.2s linear;
  }
  .breadcrumb-links li:after,
  .breadcrumb-links li:before {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 1em;
    background: #fff;
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  }
  .breadcrumb-links li:before {
    background: {{settings.color_border}};
    margin-left: 1px;
  }
  .breadcrumb-links li:last-child {
    border-right: none;
  }
</style>

The article, post, contribution and search_result objects all have a path_steps array describing the path to the object. More complex patterns are possible using these path_step objects:

Breadcrumbs built using path steps
View code
<ol class="list-divider inline-flex py-4 px-6 border bg-gray-100">
  {{#each path_steps}}
    {{#if @first}}
      <li title="{{name}}" data-divider="&rsaquo;">
        <a class="text-inherit" href="{{url}}">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 400" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
            <path class="fil0" d="M208 2l194 161c6,5 2,15 -6,15l-45 0 0 195c0,5 -4,9 -9,9l-94 0c-5,0 -9,-4 -9,-9l0 -113c0,-5 -3,-9 -8,-9l-57 0c-5,0 -9,4 -9,9l0 113c0,5 -3,9 -8,9l-94 0c-5,0 -9,-4 -9,-9l0 -195 -46 0c-7,0 -11,-10 -5,-15l194 -161c3,-3 8,-3 11,0z"></path>
          </svg>
          <span class="sr-only">{{name}}</span>
        </a>
      </li>
    {{else}}
      <li title="{{name}}" data-divider="&rsaquo;">
        <a class="text-inherit" href="{{url}}">
          {{name}}
        </a>
      </li>
    {{/if}}
  {{/each}}
</ol>

The same approach can be used to present a single path step to create a Back button:

Breadcrumbs as a back button
View code
{{#each path_steps}}
  {{#if @last}}
    <a class="button button-outline-primary" href="{{url}}">
      <svg class="svg-icon fill-current mr-1" viewBox="0 0 423 323" xmlns="http://www.w3.org/2000/svg">
        <path d="M423,162 C423,174 413,184 401,184 L76,184 L177,286 C186,294 186,308 177,317 C173,321 167,323 161,323 C156,323 150,321 146,317 L7,178 C-2,169 -2,155 7,146 L146,7 C155,-2 169,-2 177,7 C186,16 186,30 177,39 L76,140 L401,140 C413,140 423,150 423,162 Z"></path>
      </svg>
      {{name}}
    </a>
  {{/if}}
{{/each}}

Or to make long breadcrumb links automatically truncate on smaller screen sizes:

Breadcrumb links that truncate when necessary
View code
<ol class="list-divider inline-flex flex-no-wrap max-w-full p-4 border border-radius shadow">
  {{#each path_steps}}
    {{#if @first}}
      <li title="{{name}}" data-divider="&rsaquo;">
        <a class="text-inherit" href="{{url}}">
          <svg class="svg-icon fill-current md:hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 405 400" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M208 2l194 161c6,5 2,15 -6,15l-45 0 0 195c0,5 -4,9 -9,9l-94 0c-5,0 -9,-4 -9,-9l0 -113c0,-5 -3,-9 -8,-9l-57 0c-5,0 -9,4 -9,9l0 113c0,5 -3,9 -8,9l-94 0c-5,0 -9,-4 -9,-9l0 -195 -46 0c-7,0 -11,-10 -5,-15l194 -161c3,-3 8,-3 11,0z"/>
          </svg>
          <span class="hidden md:inline-block">Home</span>
        </a>
      </li>
    {{else}}
      <li class="{{#if @last}}white-space-no-wrap{{else}}truncate{{/if}}" title="{{name}}" data-divider="&rsaquo;">
        <a class="text-inherit white-space-no-wrap" href="{{url}}">
          {{name}}
        </a>
      </li>
    {{/if}}
  {{/each}}
</ol>

The HTML for breadcrumbs is provided by the Zendesk {{breadcrumbs}} helper and cannot be modified directly.

You can use breadcrumbs patterns by copying and pasting the code into the position you’d like them to appear on any page that supports the helper:

  • Article page
  • Category page
  • Contributions page
  • Request page
  • Request List page
  • Search Results page
  • Section page
  • Following page
  • New Community Post page
  • Community Post page
  • Community Topic List page
  • Community Topic page
  • Community Post List page

Customizing helper output

Despite the breadcrumb HTML being generated by Zendesk, it is possible to customize the appearance of the element in several ways:

  1. Update one or more of the Sass variables described below and recompiling the theme stylesheet.

  2. Add your own custom CSS in the theme’s style.css file targeting the .breadcrumbs element.

  3. Use HTML elements and utilities to wrap the .breadcrumbs element, as some of our patterns do.

  4. Generate your own markup using the array of path_steps objects, where available.

    The article, post, contribution and search_result objects all have a path_steps array describing the path to the object. You can use these to generate your own custom HTML and thereby create an entirely custom look-and-feel without affecting instances of breadcrumbs elsewhere in the help center generated with the {{breadcrumbs}} helper.

For a complete list of available Sass variables, please refer to the breadcrumbs element page.

Related patterns