Breadcrumb

Display the current location within a hierarchy. And allow 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.

Examples

• Basic Usage · basic
• With an Icon · withIcon
• With Params · withParams
• Configuring the Separator · separator
• Bread crumbs with drop down menu · overlay
• Configuring the Separator Independently · separator-component
• Debug Routes · debug-routes
• Custom semantic dom styling · style-class

API

Common props ref：Common props

Breadcrumb

ItemType

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

RouteItemType

SeparatorType

const item = {
  type: 'separator', // Must have
  separator: '/',
};

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

Semantic DOM

Semantic description source: vendor/components/breadcrumb/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/breadcrumb/style/index.ts

import { unit } from '@ant-design/cssinjs';

import type { CSSObject } from '@ant-design/cssinjs';

import { genFocusStyle, resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 面包屑项文字颜色
   * @descEN Text color of Breadcrumb item
   */
  itemColor: string;
  /**
   * @desc 图标大小
   * @descEN Icon size
   */
  iconFontSize: number;
  /**
   * @desc 链接文字颜色
   * @descEN Text color of link
   */
  linkColor: string;
  /**
   * @desc 链接文字悬浮颜色
   * @descEN Color of hovered link
   */
  linkHoverColor: string;
  /**
   * @desc 最后一项文字颜色
   * @descEN Text color of the last item
   */
  lastItemColor: string;
  /**
   * @desc 分隔符外间距
   * @descEN Margin of separator
   */
  separatorMargin: number;
  /**
   * @desc 分隔符颜色
   * @descEN Color of separator
   */
  separatorColor: string;
}

interface BreadcrumbToken extends FullToken<'Breadcrumb'> {}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/breadcrumb/Breadcrumb.tsx
• vendor/components/breadcrumb/BreadcrumbContext.ts
• vendor/components/breadcrumb/BreadcrumbItem.tsx
• vendor/components/breadcrumb/BreadcrumbSeparator.tsx
• vendor/components/breadcrumb/index.tsx
• vendor/components/breadcrumb/style/index.ts
• vendor/components/breadcrumb/useItemRender.tsx
• vendor/components/breadcrumb/useItems.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.