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

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
iconFontSize	图标大小	number	14
itemColor	面包屑项文字颜色	string	rgba(0, 0, 0, 0.45)
lastItemColor	最后一项文字颜色	string	rgba(0, 0, 0, 0.88)
linkColor	链接文字颜色	string	rgba(0, 0, 0, 0.45)
linkHoverColor	链接文字悬浮颜色	string	rgba(0, 0, 0, 0.88)
separatorColor	分隔符颜色	string	rgba(0, 0, 0, 0.45)
separatorMargin	分隔符外间距	number	8

글로벌 토큰어떻게 사용하나요?