Breadcrumbs

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

Overview

Resources

Install


yarn add @camp/breadcrumbs

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🏷️ New tag property within the crumbs object: Be explicit in choosing whether the Breadcrumbs component should render a link or button under the hood.

Previous implementation


import { Breadcrumbs, BreadcrumbLink } from '@activecampaign/camp-components-breadcrumbs';
 
const crumbs: BreadcrumbLink[] = [
    { href: 'https://www.activecampaign.com/', text: 'First Crumb' }, // the component will determine whether to render a link or button by the presence of the `href` or `onClick` props
    {
      onClick: (e:React.MouseEvent<HTMLButtonElement>) => console.log(`/path/to/second/crumb`),
      text: 'Second Crumb',
    },
  ]
 
   ...
   return (
      <Breadcrumbs crumbs={crumbs} currentPage="Current Page" />
   )

New implementation

The new Breadcrumbs API very much resembles it’s predecessor, but there are is a key difference to be aware of:

In the previous implementation, the component would determine whether to render a link or button based on the presence of the href or onClick props. In the new implementation, you must explicitly tell the component to render a link or button by setting the tag property to either 'a' or 'button'.


import { Breadcrumbs, CrumbProps } from "@camp/breadcrumbs";
 
const crumbs: CrumbsType[] = [
   { tag: 'a', children: 'First Crumb', href: 'google.com' }, // by telling the component to render an anchor tag, Typescript will enable intellisense / autocomplete for HTMLAnchorElement props
   ...
   { tag: 'button', children: 'Fifth Crumb', onClick: () => console.log('clicked') }, // by telling the component to render a button tag, Typescript will enable intellisense / autocomplete for HTMLButtonElement props
   ...
]
 
   ...
   return (
      <Breadcrumbs crumbs={crumbs} currentPage="Current Page" />
   )

Migration steps

Update import path: Replace the old tabs imports from @camp/breadcrumbs per the section above titled “New Implementation”.
Update type name: When setting up a list of crumbs, pull in the CrumbProps type from the @camp/breadcrumbs package, instead of the old BreadcrumbLink type.
Specify the tag prop for each crumb: This is required, and will determine whether the component renders an anchor tag or button under the hood.

Usage

Default


import { Breadcrumbs, CrumbProps } from '@camp/breadcrumbs';
 
const crumbs: CrumbsType[] = [
  { tag: 'a', children: 'First Crumb', href: 'google.com' },
  { tag: 'button', children: 'Second Crumb' },
];
...
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.

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.

Use ‘overflow’ sparingly as it can add complexity to a page if it isn’t required for wayfinding purposes.


import { Breadcrumbs, CrumbProps } from '@camp/breadcrumbs';
 
const crumbs: CrumbsType[] = [
  { tag: 'a', children: 'First Crumb', href: 'google.com' },
  { tag: 'a', children: 'Second Crumb', href: 'google.com' },
  { tag: 'a', children: 'Third Crumb', href: 'google.com' },
  { tag: 'a', children: 'Fourth Crumb', href: 'google.com' },
]; // more than 2 crumbs will automatically trigger overflow
 
...
 
return <Breadcrumbs crumbs={crumbs} 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