Breadcrumbs

Breadcrumbs help users navigate through the application and provide visual wayfinding.

Overview

Resources

Install


yarn add @activecampaign/camp-components-breadcrumbs

Variations

Breadcrumbs are a list of links representing the current page and its ancestors such as the parent page and grandparent page. They’re a useful addition to, but should not replace, the main navigation on a page.

Breadcrumbs accept a list of link objects colloquially called crumbs, and the title of the current page. Each crumb object has a link href and and the display text for that link. The array of crumbs is ordered in such a way that the first element in the array is the first breadcrumb placed on the way to the current page. The current page will always be visible, even if the list of crumbs is empty.

Default

Breadcrumbs are commonly utilized at the top of Contact, Deal, and Account Detail pages in the page header to provide wayfinding assistance.


import {
 Breadcrumbs,
 BreadcrumbLink } from '@activecampaign/camp-components-breadcrumbs';
 
const crumbs: Array<BreadcrumbLink> = [
 {
  href: '....',
  text: "First Crumb"
 }
];
 
const BreadcrumbsExample = () => {
 return (
  <Breadcrumbs
   crumbs={ crumbs }
   currentPage={ "Current Page" }
  />
 );
}

Overflow

Typically, breadcrumbs should be no longer than three levels when including the current page. When a flow is particularly complex, overflow can be applied to save space. Use overflow sparingly as it can add complexity to a page if it isn’t required for wayfinding purposes.

In development, the internal logic of Breadcrumbs automatically handles placing the middle crumbs into an overflow menu if the array of crumbs exceeds a length of 2.


import {
 Breadcrumbs,
 BreadcrumbLink } from '@activecampaign/camp-components-breadcrumbs';
 
const crumbs: Array<BreadcrumbLink> = [
 {
  href: '....',
  text: "First Crumb"
 },
 {
  href: '....',
  text: "Second Crumb"
 },
 {
  href: '....',
  text: "Third Crumb"
 },
 {
  href: '....',
  text: "Fourth Crumb"
 }
];
 
const BreadcrumbsExample = () => {
 return (
  <Breadcrumbs
   crumbs={ crumbs }
   currentPage={ "Current Page" }
  />
 );
}

By default, the Breadcrumb component is configured to render a series of <a /> tags. There may be instances where you need the Breadcrumb to render as a <button /> instead.

An example of a recent use case was enabling integration with react-router and history navigation.

To enable this, simply set an onClick value for the crumb objects that you’d like to render as <button />’s:


<Breadcrumbs
  crumbs={[
    {
      href: 'https://www.activecampaign.com/',
      text: 'This crumb is a link',
    },
    {
      onClick: function noRefCheck() {},
      text: 'This crumb is a button',
    },
    {
      href: 'https://www.activecampaign.com/',
      text: 'This crumb is a link',
    },
    {
      onClick: function noRefCheck() {},
      text: 'This crumb is a button',
    },
    {
      href: 'https://www.activecampaign.com/',
      text: 'This crumb is a link',
    },
    {
      href: 'https://www.activecampaign.com/',
      onClick: function noRefCheck() {},
      text: 'This crumb is a button',
    },
  ]}
  currentPage="Current Page"
/>

Accessibility

Keyboard support

Move focus to each breadcrumb using the tab key, or shift + tab to move backwards
To interact with the breadcrumb link when it has keyboard focus, use the space or enter key
When there are three or more crumbs, tab can also be used to focus on the overflow menu icon, with space or enter used to open the overflow menu and ↑ or ↓ to traverse links
When the overflow menu is open, space or enter can also be used to visit a link