Breadcrumbs

The <Breadcrumbs /> component is used to communicate the user's current location in the site's hierarchical structure, and offers a quick way to navigate back to parent pages. A page should never have more than one instance of breadcrumbs at any one time.

Show codeCopy code

Use the crumbs prop to pass in an array of objects — i.e. the "crumbs". Each object needs to have a label provided. Each crumb with a href will render a <Link /> component.

NOTE: To ensure correct typing, import and declare CrumbsProps as the type for your crumbs. You can also set the shouldIgnoreCoreLinkComponent: true when you need to "ignore" any global linkComponent override in <Core/> for specific instances.

const crumbs: CrumbsProps = [{ label: 'Grand Parent', href: '#' }, { label: 'Parent', href: '#' }, { label: 'Child' }];

return <Breadcrumbs crumbs={crumbs} />;

Always include the current page as the last object in the array. This should not be a link, so you have to omit the href from the object, and it will render as plain <Text />. Doing this will also add a visually hidden text string announcing "current page" to assistive technologies.

const crumbs: CrumbsProps = [
  { label: 'Home', href: '/' },
  { label: 'Administration', href: '/administration' },
  { label: 'HR Core', href: '/administration/hr-core' },
  { label: 'Legal entities' },
];

Prefer to place the breadcrumbs at the top of the page content, above the page title, and aligned to the left.