ant-design/components/breadcrumb/index.en-US.md
2023-12-12 18:00:43 +08:00

3.8 KiB
Raw Blame History

category group title cover coverDark demo
Components Navigation Breadcrumb https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Tr90QKrE_LcAAAAAAAAAAAAADrJ8AQ/original
cols
2

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

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

Basic Usage With an Icon Configuring the Separator Bread crumbs with drop down menu Configuring the Separator Independently Debug Routes Component Token

API

Common props refCommon props

Breadcrumb

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 = RouteItemType | 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(route, params, items, paths) {
  const last = items.indexOf(item) === items.length - 1;
  return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
}

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

Design Token