React Breadcrumbs🔗

@volvo-cars/react-breadcrumbs

@volvo-cars/react-breadcrumbs
@volvo-cars/react-breadcrumbs
@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.

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.

🔒 Locked viewport @480px

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

🔒 Locked viewport @280px

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.

Which renders the following HTML:

Custom Tracking🔗

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

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

API🔗

Props - Breadcrumbs🔗

Name
Description
Type
Default Value
trailLink trail({ href:string; title:string; trackEventLabel?:string})[]undefined
currentTitleTitle of the last non-link crumb in the trailstringundefined
aria-labelCustom aria-label to override default label served by Shared translations packagestringundefined

Props - BreadcrumbsStructuredData🔗

Name
Description
Type
Default Value
trailLink trail({ href:string; title:string})[]undefined
prettyPretty render the json-ld databooleanfalse
2022 © Volvo Car Corporation