Sections

Breadcrumbs

Available on pages that support the {{breadcrumbs}} helper, this pattern allows visitors to navigate the content hierarchy of your Help Center.

Although the HTML provided by the {{breadcrumbs}} helper cannot be modified, the appearance of the element can be modified in several ways:

  1. Updating Sass variables
  2. Writing custom CSS targeting the .breadcrumbs element
  3. Using wrapper elements and utilities
  4. Generate your own markup using the path_steps array, where available.

The following Sass variables are available in the 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.

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

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 example :

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

Long breadcrumb links can also be made to truncate on smaller screen sizes: