Breadcrumb 面包屑 #

概述 #

Breadcrumb 面包屑用于显示当前页面在系统层级结构中的位置，帮助用户了解当前位置并快速返回上级页面。

基础用法 #

基本使用 #

tsx 
import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';

const items = [
  { title: <HomeOutlined /> },
  { title: <a href="">应用中心</a> },
  { title: <a href="">应用列表</a> },
  { title: '应用详情' },
];

<Breadcrumb items={items} />

带图标 #

tsx 
import { Breadcrumb } from 'antd';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';

const items = [
  {
    href: '/',
    title: (
      <>
        <HomeOutlined />
        <span>首页</span>
      </>
    ),
  },
  {
    href: '/user',
    title: (
      <>
        <UserOutlined />
        <span>用户中心</span>
      </>
    ),
  },
  {
    title: '用户列表',
  },
];

<Breadcrumb items={items} />

分隔符 #

tsx 
import { Breadcrumb } from 'antd';

const items = [
  { title: <a href="">首页</a> },
  { title: <a href="">应用中心</a> },
  { title: '应用列表' },
];

<Breadcrumb separator=">" items={items} />

下拉菜单 #

tsx 
import { Breadcrumb, Menu } from 'antd';

const items = [
  { title: <a href="">首页</a> },
  {
    title: (
      <a href="">组件</a>
    ),
    menu: {
      items: [
        { key: '1', label: <a href="">通用</a> },
        { key: '2', label: <a href="">布局</a> },
        { key: '3', label: <a href="">导航</a> },
      ],
    },
  },
  { title: '面包屑' },
];

<Breadcrumb items={items} />

独立分隔符 #

tsx 
import { Breadcrumb } from 'antd';

const items = [
  { title: '首页' },
  {
    title: '组件',
    menu: {
      items: [
        { key: '1', label: '通用' },
        { key: '2', label: '布局' },
        { key: '3', label: '导航' },
      ],
    },
  },
  { title: '面包屑' },
];

<Breadcrumb items={items} />

API #

属性 说明 类型 默认值
itemRender 自定义链接函数 (route, params, routes, paths) => ReactNode -
items 路由栈信息 ItemType[] -
params 路由参数 object -
separator 分隔符 ReactNode /

ItemType #

属性 说明 类型 默认值
className 自定义类名 string -
dropdownProps 弹出下拉菜单属性 DropdownProps -
href 链接地址 string -
key 唯一标识 string -
menu 下拉菜单 MenuProps -
path 路由路径 string -
title 内容 ReactNode -
onClick 点击事件 (e: React.MouseEvent) => void -

最佳实践 #

1. 配合路由使用 #

tsx 
import { Breadcrumb } from 'antd';
import { useLocation, Link } from 'react-router-dom';

const breadcrumbNameMap = {
  '/home': '首页',
  '/home/user': '用户管理',
  '/home/user/list': '用户列表',
  '/home/user/detail': '用户详情',
};

const BreadcrumbWithRouter = () => {
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter((i) => i);

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return {
      key: url,
      title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
    };
  });

  const breadcrumbItems = [
    {
      title: <Link to="/home">首页</Link>,
      key: 'home',
    },
  ].concat(extraBreadcrumbItems);

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

2. 配合 Layout 使用 #

tsx 
import { Layout, Breadcrumb } from 'antd';

const { Content } = Layout;

const items = [
  { title: <a href="">首页</a> },
  { title: <a href="">列表</a> },
  { title: '详情' },
];

<Content style={{ padding: '0 50px' }}>
  <Breadcrumb style={{ margin: '16px 0' }} items={items} />
  <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
    内容
  </div>
</Content>

3. 动态面包屑 #

tsx 
import { Breadcrumb } from 'antd';
import { useState, useEffect } from 'react';

const DynamicBreadcrumb = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const path = window.location.pathname;
    const newItems = generateBreadcrumbItems(path);
    setItems(newItems);
  }, []);

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

下一步 #

接下来学习 Form 表单 组件！

最后更新：2026-03-28