logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Breadcrumb

Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy.
Importimport { Breadcrumb } from "antd";
Sourcecomponents/breadcrumb
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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.
jsx
// 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

Breadcrumb

PropertyDescriptionTypeDefaultVersion
itemRenderCustom item renderer(route, params, routes, paths) => ReactNode-
paramsRouting parametersobject-
itemsThe routing stack information of routerItemType[]-5.3.0
separatorCustom separatorReactNode/

ItemType

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

RouteItemType

PropertyDescriptionTypeDefaultVersion
classNameThe additional css classstring-
dropdownPropsThe dropdown propsDropdown-
hrefTarget of hyperlink. Can not work with pathstring-
pathConnected path. Each path will connect with prev one. Can not work with hrefstring-
menuThe menu propsMenuProps-4.24.0
onClickSet the handler to handle click event(e:MouseEvent) => void-
titleitem nameReactNode-

SeparatorType

ts
const item = {
type: 'separator', // Must have
separator: '/',
};
PropertyDescriptionTypeDefaultVersion
typeMark as separatorseparator5.3.0
separatorCustom separatorReactNode/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} />;

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
iconFontSizeIcon sizenumber14
itemColorText color of Breadcrumb itemstringrgba(0,0,0,0.45)
lastItemColorText color of the last itemstringrgba(0,0,0,0.88)
linkColorText color of linkstringrgba(0,0,0,0.45)
linkHoverColorColor of hovered linkstringrgba(0,0,0,0.88)
separatorColorColor of separatorstringrgba(0,0,0,0.45)
separatorMarginMargin of separatornumber8
Global TokenHow to use?
Basic Usage

The simplest use.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With Params

With route params.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Bread crumbs with drop down menu

Breadcrumbs support drop down menu.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Debug Routes

Origin routes debug.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With an Icon

The icon should be placed in front of the text.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Configuring the Separator

The separator can be customized by setting the separator property: separator=">".

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Configuring the Separator Independently

Customize separator for each other.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  1. Home
  2. /
  3. Application Center
  4. /
  5. Application List
  6. /
  7. An Application
  1. Users
  2. /
  3. 1
  1. Ant Design
  2. /
  3. Component
  4. /
  5. General
  6. /
  7. Button
  1. Home
  2. /
  3. User
  1. /
  2. Application List
  3. /
  4. Application
  1. Home
  2. >
  3. Application Center
  4. >
  5. Application List
  6. >
  7. An Application
  1. Location
  2. :
  3. Application Center
  4. /
  5. Application List
  6. /
  7. An Application