Breadcrumb - Ant Design

When To Use

When the system has more than two layers in a hierarchy.
When you need to inform the user of where they are.
When the user may need to navigate back to a higher level.

// works when >=5.3.0, recommended ✅
return <Breadcrumb items={[{ title: 'sample' }]} />;

// works when <5.3.0, deprecated when >=5.3.0 🙅🏻‍♀️
return (
  <Breadcrumb>
    <Breadcrumb.Item>sample</Breadcrumb.Item>
  </Breadcrumb>
);

// or

return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
itemRender	Custom item renderer	(route, params, routes, paths) => ReactNode	-
params	Routing parameters	object	-
items	The routing stack information of router	ItemType[]	-	5.3.0
separator	Custom separator	ReactNode	`/`

ItemType

type ItemType = Omit<RouteItemType, 'title' | 'path'> | SeparatorType

RouteItemType

Property	Description	Type	Default	Version
className	The additional css class	string	-
dropdownProps	The dropdown props	Dropdown	-
href	Target of hyperlink. Can not work with `path`	string	-
path	Connected path. Each path will connect with prev one. Can not work with `href`	string	-
menu	The menu props	MenuProps	-	4.24.0
onClick	Set the handler to handle click event	(e:MouseEvent) => void	-
title	item name	ReactNode	-

SeparatorType

const item = {
  type: 'separator', // Must have
  separator: '/',
};

Property	Description	Type	Default	Version
type	Mark as separator	`separator`		5.3.0
separator	Custom separator	ReactNode	`/`	5.3.0

Use with browserHistory

The link of Breadcrumb item targets # by default, you can use itemRender to make a browserHistory Link.

import { Link } from 'react-router';

const items = [
  {
    path: '/index',
    title: 'home',
  },
  {
    path: '/first',
    title: 'first',
    children: [
      {
        path: '/general',
        title: 'General',
      },
      {
        path: '/layout',
        title: 'Layout',
      },
      {
        path: '/navigation',
        title: 'Navigation',
      },
    ],
  },
  {
    path: '/second',
    title: 'second',
  },
];

function itemRender(currentRoute, params, items, paths) {
  const isLast = currentRoute?.path === items[items.length - 1]?.path;

  return isLast ? (
    <span>{currentRoute.title}</span>
  ) : (
    <Link to={`/${paths.join("/")}`}>{currentRoute.title}</Link>
  );
}

return <Breadcrumb itemRender={itemRender} items={items} />;

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
iconFontSize	Icon size	number	14
itemColor	Text color of Breadcrumb item	string	rgba(0, 0, 0, 0.45)
lastItemColor	Text color of the last item	string	rgba(0, 0, 0, 0.88)
linkColor	Text color of link	string	rgba(0, 0, 0, 0.45)
linkHoverColor	Color of hovered link	string	rgba(0, 0, 0, 0.88)
separatorColor	Color of separator	string	rgba(0, 0, 0, 0.45)
separatorMargin	Margin of separator	number	8

Global TokenHow to use?