Skip to content

Breadcrumbs

Breadcrumbs help users understand their location within a hierarchy and move between levels.

Figma logo
Anatomy of Breadcrumbs
Breadcrumbs and its sub-components
Anatomy of the Breadcrumbs component
ElementPurpose
CrumbCrumb elements link to the individual items in the breadcrumb’s trail.
SeparatorSeparators are automatically displayed between crumb elements to help users visualize the hierarchy.
Current pageThe current page is shown as the right-most crumb and is not actionable.

A React Router variant of BreadcrumbsItem is available using a dedicated package. The only difference is that the href prop is replaced with the to prop.

import { Breadcrumbs } from '@gusto/workbench';
import { BreadcrumbsItem } from '@gusto/workbench-react-router';
<Breadcrumbs>
<BreadcrumbsItem to="../..">First</BreadcrumbsItem>
<BreadcrumbsItem to="..">Second</BreadcrumbsItem>
<BreadcrumbsItem>Third</BreadcrumbsItem>
</Breadcrumbs>
React props
NameTypeDefaultDescription
children  ReactNodeThe content of the Breadcrumb
href  stringThe destination of the Breadcrumb. This prop changes to to when using the React Router variant of BreadcrumbsItem.

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<Breadcrumbs>
<BreadcrumbsItem href="../..">Hiring</BreadcrumbsItem>
<BreadcrumbsItem href="..">Background checks</BreadcrumbsItem>
<BreadcrumbsItem>Reconnect</BreadcrumbsItem>
</Breadcrumbs>
);
const nav = screen.getByRole('navigation', { name: 'Breadcrumbs' })
expect(nav).toBeInTheDocument();
const link = screen.getByRole('link', { name: 'Hiring' });
expect(link).toBeInTheDocument();
expect(link).toHaveAttribute('href', '../..');
-------------------- Other possible queries --------------------
const list = within(nav).getByRole('list');
expect(list).toBeInTheDocument();
const items = within(list).getAllByRole('listitem');
expect(items).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = items;
const firstLink = within(firstItem).getByRole('link', { name: 'Hiring' });
expect(firstLink).toBeInTheDocument();
expect(firstLink).toHaveAttribute('href', '../..');
const secondLink = within(secondItem).getByRole('link', { name: 'Background checks' });
expect(secondLink).toBeInTheDocument();
expect(secondLink).toHaveAttribute('href', '..');
const thirdLink = within(thirdItem).getByRole('link', { name: 'Reconnect' });
expect(thirdLink).toBeInTheDocument();
expect(thirdLink).toHaveAttribute('href', '');