ant-design/components/breadcrumb/index.en-US.md
ice ca66d5c592
docs(breadcrumb): add with params demo ()
* docs(breadcrumb): add with params demo

* test: add snap
2024-07-16 22:13:14 +08:00

4.0 KiB
Raw Blame History

category group title description cover coverDark demo
Components Navigation Breadcrumb Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. 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

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 With Params 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 = 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