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.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version	Global Config
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0	6.0.0
dropdownIcon	Custom dropdown icon	ReactNode	`<DownOutlined />`	6.2.0	6.2.0
items	The routing stack information of router (>=5.3.0 recommended, use `Breadcrumb.Item` children for older versions)	ItemType[]	-	5.3.0	×
itemRender	Custom item renderer, work with react-router, see example	(route, params, routes, paths) => ReactNode	-		×
params	Routing parameters	object	-		×
separator	Custom separator	ReactNode	`/`		6.0.0
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0	6.0.0

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

ts

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.

jsx

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} />;

Semantic DOM

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?

Token Name	Description	Type	Default Value
colorBgTextHover	Control the background color of text in hover state.	string	rgba(0,0,0,0.06)
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number	4
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeIcon	Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.	number	12
lineHeight	Line height of text.	number	1.5714285714285714
lineWidthFocus	Control the width of the line when the component is in focus state.	number	3
marginXXS	Control the margin of an element, with the smallest size.	number	4
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string	0.2s
paddingXXS	Control the extra extra small padding of the element.	number	4