React Breadcrumbs

Questions? Ask in Slack #vcc-ui

@volvo-cars/react-breadcrumbs

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are placed horizontally before a page's main content.

Installation

💡 This package includes Typescript definitions

📝 This package has built-in translations

Breadcrumbs

The Breadcrumbs component takes a trail array of objects with href, title and an optional trackEventLabel as properties that represent each link in the trail. As well as a currentTitle that represents the last non-link crumb.

<Breadcrumbs
  trail={[
    { title: 'Home', href: '#link/to/page1' },
    { title: 'Recharge', href: '#link/to/page2' },
    { title: 'Suvs', href: '#link/to/page3' },
  ]}
  currentTitle="Shop XC90"
/>

Medium and large breakpoints

On medium and large breakpoints, the Breadcrumbs component renders every link in the trail in order with the currentTitle as the last non-link element.

<Breadcrumbs
  trail={[
    { title: 'Home', href: '#link/to/page1' },
    { title: 'Recharge', href: '#link/to/page2' },
    { title: 'Suvs', href: '#link/to/page3' },
  ]}
  currentTitle="Shop XC90"
/>

Collapsing

The Breadcrumb component collapses the middle links when its width exceeds a certain threshold (~90vw), it replaces those links with a single link (...) that points to the last link from the collapsed ones.

Each of those collapsable links has a maximum width of ~20ch.

Small breakpoints

On small breakpoints, the Breadcrumbs component renders the last link in the trail with a back arrow and hides everything else

<Breadcrumbs
  trail={[
    { title: 'Home', href: '#link/to/page1' },
    { title: 'Recharge', href: '#link/to/page2' },
    { title: 'Suvs', href: '#link/to/page3' },
  ]}
  currentTitle="Shop XC90"
/>

Accessibility

The Breadcrumbs component is built with accessibility in mind following WAI:ARIA best practices:

• The Breadcrumb component is contained within a navigation landmark region.
• The landmark region is labelled via localized aria-label.
• The non-link element of the current page has aria-current set to page.

The Breadcrumbs component ships with built-in translations for aria-label when used in conjunction with the Shared translations library but can be overridden with a custom aria-label prop.

Structured data

Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Often, users can arrive at a page from very different types of search queries. Structured data is a standardized format for providing information about a page and classifying the page content.

The BreadcrumbsStructuredData component renders a script tag with structured data in JSON-ld format. It takes a trail array of objects with href and title as properties that represent each link in the trail.

<BreadcrumbsStructuredData
  trail={[
    { title: 'Home', href: 'link/to/page1' },
    { title: 'Recharge', href: 'link/to/page2' },
    { title: 'Suvs', href: 'link/to/page3' },
  ]}
/>

Which renders the following HTML:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "link/to/page1"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Recharge",
        "item": "link/to/page2"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Suvs",
        "item": "link/to/page3"
      }
    ]
  }
</script>

Custom Tracking

Each link in the trail will send an interaction event with click eventAction as well as a ${index} | ${title} eventLabel by default.

{
  "event": "interaction",
  "eventAction": "click",
  "eventLabel": "0 | page 1"
}

The eventLabel can be overridden using trackEventLabel in each link in the trail array.

<Breadcrumbs
  trail={[
    {
      title: 'Home',
      href: '#link/to/page1',
      trackEventLabel: 'custom label 1',
    },
    {
      title: 'Recharge',
      href: '#link/to/page2',
      trackEventLabel: 'custom label 2',
    },
    {
      title: 'Suvs',
      href: '#link/to/page3',
      trackEventLabel: 'custom label 3',
    },
  ]}
  currentTitle="Shop XC90"
/>

API

Props - Breadcrumbs

| Name | Description | Type | Default Value | | -------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------- | | trail | Link trail | ({ href:string; title:string; trackEventLabel?:string})[] | undefined | | currentTitle | Title of the last non-link crumb in the trail | string | undefined | | aria-label | Custom aria-label to override default label served by Shared translations package | string | undefined |

Props - BreadcrumbsStructuredData

| Name | Description | Type | Default Value | | -------- | ------------------------------ | ---------------------------------- | ------------- | | trail | Link trail | ({ href:string; title:string})[] | undefined | | pretty | Pretty render the json-ld data | boolean | false |