Breadcrumb

# Use when

• Helping users understand where they are within the site hierarchy
• Providing a shortcut to explore similar products within common parent categories

# Don’t use when

• Displaying a top-level page, such as a home or high level category page
• Linking to previous steps of a sequential process

# Foundations

• Avoid displaying breadcrumbs on non-white backgrounds
• Within a breadcrumb, link styles are adapted:
  • Ancestor links are displayed as $sys-color-taken-for-granite
  • Last child link is emphasized as $sys-color-heart-of-darkness
• Emphasize breadcrumb hover states with the $sys-color-heart-of-darkness color and an underline

# Content

• Always align breadcrumb labels with page names that are the destination of that breadcrumb
• Incorporate keywords into page names and breadcrumbs to improve SEO
• Align breadcrumb labels with words customers use while searching for products, events, adventures or expert advice
• Never include the current page in a breadcrumb path. Instead, display that label only as a page title
• Guidelines for applying breadcrumb category names are found in the REI Navigation Standards: Breadcrumbs article
• For items in multiple categories and no primary path has been identified, display the most relevant path:
  • If an article lives in both Hiking and Camping, and the user browsed to the article through Hiking, show the breadcrumb that includes Hiking
  • If the user browsed to the same article through Camping, show the breadcrumb that includes Camping
  • If the user landed on the article from a Google search, show either category as a breadcrumb

# Behavior

Breadcrumbs provide context and a sense of place. This is especially important on a small screen, where other orienting content isn’t visible.

• Include the full location path data once and only once in the code
• Always retain the full location path in page markup, even if shortened due to responsive styling
• Display the complete breadcrumb path—not just the previous item—when an ellipsis is clicked or tapped
• When full breadcrumbs path is displayed, it may wrap to 2 or more lines
• Refer to API documentation for how to customize breadcrumb truncation width

# Do / Don't

# Truncation

Truncate breadcrumbs at 80% width of the screen’s content container except for mobile (that truncates at 100%) as shown below

Indicate hidden links using an ellipsis

Truncate breadcrumbs left to right to show the final two links in the trail, so that at least the parent and grandparent are always visible

# Avoid customization

# Resources

• REI Navigation Standards: Breadcrumbs

# Props

# Installation

Resources are available within the CdrBreadcrumb package:

• Component: @rei/cdr-breadcrumb
• Component styles: cdr-breadcrumb.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrBreadcrumb package using npm in your terminal:

Terminal

npm i -S @rei/cdr-breadcrumb

# 2. Import Dependencies

main.js

// import your required CSS.
import "@rei/cdr-breadcrumb/dist/cdr-breadcrumb.css";

# 3. Add component to a template

local.vue

<template>
  <cdr-breadcrumb :items="breadcrumbItems"/>
</template>

<script>
import { CdrBreadcrumb } from '@rei/cdr-breadcrumb';
export default {

  components: {
     CdrBreadcrumb
  },
  data () {
    breadcrumbItems: [
      {
        item: {
          name: ‘Great GrandParent Page’,
          url: “<UrlBreadcrumb1>”
        }
      },
      {
        item: {
          name: “Grandparent Page”,
          url: “<UrlBreadcrumb2>”
        }
      }
      {
        item: {
          name: “Parent Page”,
          url: “<UrlBreadcrumb3>”
        }
      }
    ]
  }
}
</script>

# Usage

The items property requires an array of objects, in the format shown above. Notable values include:

• item.url (optional) string where the breadcrumb item segment links when clicked or tapped
• item.name (required) string for the breadcrumb text item segment

The array must be ordered appropriately from low index rendered on the left, to high index on the right.

The below example shows alternatively setting items using an array literal.

<cdr-breadcrumb
  :items="[
    {item:{url:'', name: 1}},
    {item:{url:'', name: 2}},
    {item:{url:'', name: 3}}
  ]"
/>

Use truncationEnabled to disable the truncation functionality. Below shows truncation being disabled.

<cdr-breadcrumb
  :truncation-enabled="false"
  :items="[
    {url:'', name: 1},
    {url:'', name: 2},
    {url:'', name: 3}
  ]"
/>

Use the truncationThreshold prop to alter when truncation occurs:

• Value must be a number between 0 and 1
• Truncation occurs when (breadcrumb width) / (container width) exceeds the truncationThreshold value
• The default value is 0.80 ( 80% )

The below image and example code shows using truncationThreshold to set truncation to occur at 50%.

<cdr-breadcrumb
  :truncation-threshold="0.50"
  :items="breadcrumbItems"
/>

Use the truncationXSThreshold prop to alter when truncation occurs:

• Value must be a number between 0 and 1
• Truncation occurs when (breadcrumb width) / (container width) exceeds the truncationXSThreshold value on XS screen sizes
• The default value is 1 ( 100% )

The below image and example code shows using truncationXSThreshold to set truncation to occur at 70%.

<cdr-breadcrumb
  :truncation-x-s-threshold=“0.70”
  :items="breadcrumbItems"
/>