Breadcrumbs

Breadcrumbs show a list of links that show the path to the current page the user is looking at. The last link in the breadcrumb is the current page.

Example

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', url: '/deliverables' }, { label: 'NetworkD', url: '/networkd' }, { label: 'Campaign-B', url: '/campaignb' }, { label: 'Adgroup-D', url: '/adgroupd' }, { label: 'Creative-X', url: '/creativex' }, { label: 'Creative_H' } ]; return <Breadcrumbs items={items} />; }

function MyBreadcrumbs() {
  const items = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Campaign-B', url: '/campaignb' },
    { label: 'Adgroup-D', url: '/adgroupd' },
    { label: 'Creative-X', url: '/creativex' },
    { label: 'Creative_H' }
  ];
  return <Breadcrumbs items={items} />;
}

Result

Loading...

Usage Rules

Do:

• Include the current page in the Breadcrumbs component

Sizes:

• Default size for the breadcrumbs usage is Medium.
• Large size is used in the context of tables. There, it provides orientation on the drill down action applied to the table.

Variants

Back Button

You can use the backButton prop to display the back button on your breadcrumb.

To use the backButton in your Breadcrumb, you need to provide an object which can contain label, dataTestId, onClick, disabled, and url properties. Except for the label, other properties are optional.

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', url: '/deliverables', dataTestId: 'deliverables-data-test-id' }, { label: 'NetworkD', url: '/networkd' }, ]; const backButton = { label: 'Back', dataTestId: 'back-btn', onClick: () => { /** Onclick event for the backButton **/ } } return <Breadcrumbs backButton={backButton} items={items} />; }

function MyBreadcrumbs() {
  const items = [
    {
      label: 'Deliverables',
      url: '/deliverables',
      dataTestId: 'deliverables-data-test-id'
    },
    { label: 'NetworkD', url: '/networkd' },
  ];

  const backButton = { 
    label: 'Back',
    dataTestId: 'back-btn',
    onClick: () => {
        /** Onclick event for the backButton **/
      }
  }
  return <Breadcrumbs backButton={backButton} items={items} />;
}

Result

Loading...

You can use only backButton in your Breadcrumb by providing only backButton prop without the items prop.

Live Editor

function MyBreadcrumbs() { const backButton = { label: 'Back', dataTestId: 'back-btn', onClick: () => { /** Onclick event for the backButton **/ } } return <Breadcrumbs backButton={backButton} />; }

function MyBreadcrumbs() {
  const backButton = { 
    label: 'Back',
    dataTestId: 'back-btn',
    onClick: () => {
        /** Onclick event for the backButton **/
      }
  }
  return <Breadcrumbs backButton={backButton} />;
}

Result

Loading...

Data-testid

You can use the dataTestId prop to access data-testid for the breadcrumb items. Suppose you don't provide dataTestId with the breadcrumb object. Breadcrumb item will use the url property as data-testid

info

If you use the onClick property instead of url, please be sure that you provide the dataTestId.

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', url: '/deliverables', dataTestId: 'deliverables-data-test-id' }, { label: 'NetworkD', url: '/networkd' }, { label: 'Campaign-B', url: '/campaignb' }, { label: 'Adgroup-D', url: '/adgroupd' }, { label: 'Creative-X', url: '/creativex' }, { label: 'Creative_H', url: '/creativeh' } ]; return <Breadcrumbs items={items} />; }

function MyBreadcrumbs() {
  const items = [
    {
      label: 'Deliverables',
      url: '/deliverables',
      dataTestId: 'deliverables-data-test-id'
    },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Campaign-B', url: '/campaignb' },
    { label: 'Adgroup-D', url: '/adgroupd' },
    { label: 'Creative-X', url: '/creativex' },
    { label: 'Creative_H', url: '/creativeh' }
  ];
  return <Breadcrumbs items={items} />;
}

Result

Loading...

Icon

You can add icons to Breadcrumb items by passing appId and appName or iconName. Both appId and appName are required to render the appIcon.

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', url: '/deliverables' }, { label: 'NetworkD', url: '/networkd', appId: 'com.adjust.insights', appName: 'adjust Insights' }, { label: 'Campaign-B', url: '/campaignb', iconName: 'Star' }, { label: 'Adgroup-D', url: '/adgroupd' } ]; return <Breadcrumbs items={items} />; }

function MyBreadcrumbs() {
  const items = [
    { label: 'Deliverables', url: '/deliverables' },
    {
      label: 'NetworkD',
      url: '/networkd',
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    },
    { label: 'Campaign-B', url: '/campaignb', iconName: 'Star' },
    { label: 'Adgroup-D', url: '/adgroupd' }
  ];
  return <Breadcrumbs items={items} />;
}

Result

Loading...

Link (react-router-dom)

You can use the as prop in breadcrumb items to pass react-router-dom Link in case you need to prevent the page reload. The Breadcrumb item will be <a> tag with an href attribute by default and by passing as with Link value it will be replaced.

info

The Breadcrumb is not rendered here because the react-router-dom package is needed for naviagtion. This is just an example to show how it can be used.

import { Link } from 'react-router-dom';

function MyBreadcrumbs() {
  const items = [{ label: 'Deliverables', url: '/deliverables', as: Link }];
  return <Breadcrumbs items={items} />;
}

OnClick

Breadcrumb items accept urls or, alternatively, onClick handlers.

The latter may be used if site navigation is handled internally via JavaScript or if user navigation is tracked for analytics purposes.

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', onClick: () => { /** Navigate to another page, run analytics code etc. **/ } } ]; return <Breadcrumbs items={items} />; }

function MyBreadcrumbs() {
  const items = [
    {
      label: 'Deliverables',
      onClick: () => {
        /** Navigate to another page, run analytics code etc. **/
      }
    }
  ];
  return <Breadcrumbs items={items} />;
}

Result

Loading...

Sizes

The Breadcrumb component is available in two sizes: medium and large. Use size prop to change size of breadcrumb items. If size prop not provided, breadcrumb will use medium size by default.

Live Editor

function MyBreadcrumbs() { const items = [ { label: 'Deliverables', url: '/deliverables' }, { label: 'NetworkD', url: '/networkd' }, { label: 'Campaign-B', url: '/campaignb' }, { label: 'Adgroup-D', url: '/adgroupd' } ]; return ( <> <Breadcrumbs items={items} /> <Breadcrumbs items={items} size="large" /> </> ); }

function MyBreadcrumbs() {
  const items = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Campaign-B', url: '/campaignb' },
    { label: 'Adgroup-D', url: '/adgroupd' }
  ];
  return (
    <>
      <Breadcrumbs items={items} />
      <Breadcrumbs items={items} size="large" />
    </>
  );
}

Result

Loading...

Props

Breadcrumbs

Name	Type	Default
backButton Displays back button on the breadcrumb area	(Pick<BreadcrumbsItemType, "url" | "as" | "dataTestId"> & Pick<ButtonProps, "disabled" | "label" | "onClick">)	—
items Array of breadcrumbs items. See the structure of BreadcrumbsItemType. The last item represents the current page within a set of pages	BreadcrumbsItemType[]	—
size Size of the breadcrumb items	"medium" | "large"	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Object structure of the BreadcrumbsItemType

Name	Type	Default
label * Label of the breadcrumb item	string	—
url The URL will be associated with the breadcrumb item and attached to an <a> element	string	—
appId The appId of app icon that would appear on the left	string	—
appName The appName of app icon that would appear on the left	string	—
iconName Name of the Icon that would appear on the left. Please refer to the full list of icons here: Link	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
dataTestId The unique data-testid value for the breadcrumb item	string	—
onClick This handler will be called if the breadcrumb item is pressed (either through click or keyboard events). Use this handler if site navigation is handled internally via JavaScript	(() => void)	—
size Size of the breadcrumb items	"medium" | "large"	—
as Component to render as breadcrumb link. Use this prop to prevent page reload by passing react-router-dom Link component	ElementType<any>	—
inputFieldCss	SupportedStyleAttributes	—
* - the prop is required.