Breadcrumbs

A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness of their location as they move through a hierarchically structured web application.

Props

Name	Type	Description	Default
ariaLabel	`string`	Provides a label that describes the type of navigation enabled by the component.	`'Breadcrumbs'`
Required items	`Item[]` being `Item` an object with the following properties: `{ href?: string; label: string; }`	Array of objects representing the items of the breadcrumbs.	-
itemsBeforeCollapse	`number`	Number of items before showing a collapsed version of the breadcrumbs. It can't be lower than two (root/collapsed action and current page).	`4`
onItemClick	`(value: string) => void`	Callback for custom navigation with third-party libraries such as Next (`useRouter`) or React Router (`useNavigate`). This function will be called when an item is clicked, receiving its `href` as a parameter.	-
showRoot	`boolean`	When items are collapsed, whether the root item should always be displayed or not.	`true`

Examples

Basic usage

() => {
  const items = [
    {
      label: "Select component",
      href: "/components/select",
    },
    {
      label: "Specifications",
      href: "/components/select/specifications",
    },
    {
      label: "Design Tokens",
      href: "/components/select/specifications/#design-tokens",
    },
    {
      label: "Color",
    }
  ];

  return (
    <DxcInset space="2rem">
      <DxcBreadcrumbs items={items} />
    </DxcInset>
  );
}

() => {
  const items = [
    {
      label: "Select component",
      href: "/components/select",
    },
    {
      label: "Specifications",
      href: "/components/select/specifications",
    },
    {
      label: "Design Tokens",
      href: "/components/select/specifications/#design-tokens",
    },
    {
      label: "Color",
    }
  ];

  return (
    <DxcInset space="2rem">
      <DxcBreadcrumbs items={items} />
    </DxcInset>
  );
}

There are many React based routers, unfortunately all with different APIs.

As we explained above, the onItemClick prop is a callback that will be called when an item is clicked, receiving its href as a parameter. You can take advantage of this prop to navigate programmatically with third-party libraries hooks or functions.

() => {
  const router = useRouter();
  const handleClick = (href) => {
    router.push(href);
  };

  const items = [
    {
      label: "Select component",
      href: "/components/select",
    },
    {
      label: "Specifications",
      href: "/components/select/specifications",
    },
    {
      label: "Design Tokens",
      href: "/components/select/specifications/#design-tokens",
    },
    {
      label: "Color",
    }
  ]; 

  return (
    <DxcInset space="2rem">
      <DxcBreadcrumbs items={items} onItemClick={handleClick} />
    </DxcInset>
  );
}

() => {
  const router = useRouter();
  const handleClick = (href) => {
    router.push(href);
  };

  const items = [
    {
      label: "Select component",
      href: "/components/select",
    },
    {
      label: "Specifications",
      href: "/components/select/specifications",
    },
    {
      label: "Design Tokens",
      href: "/components/select/specifications/#design-tokens",
    },
    {
      label: "Color",
    }
  ]; 

  return (
    <DxcInset space="2rem">
      <DxcBreadcrumbs items={items} onItemClick={handleClick} />
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Custom navigation

Edit this page on GitHub

Report an issue on GitHub

Bleed

NextBulleted List

Breadcrumbs

Props

Examples

Basic usage

Custom navigation

Next.js useRouter

Contents