微软Fluent UI Breadcrumb组件如何控制最大显示项及自适应折叠？

云上老周

2026-6-24

Fluent UI 的 Breadcrumb 组件内置了自适应折叠功能，无需手动编写复杂的尺寸监听逻辑，核心通过组件自身的配置和内部机制实现。

核心实现机制

组件内部会自动完成以下操作：

监听容器的可用宽度（通过 ResizeObserver API 及窗口 resize 事件）
计算所有面包屑项的总宽度，当总宽度超出容器宽度时，自动将中间的项目折叠为带省略号的下拉按钮
当空间充足时，自动展开显示更多项目

关键配置项

你可以通过以下配置控制折叠行为：

overflowMode（React 版本）/ overflow-mode（Web Components 版本）：
- 默认值为 "auto"，开启自动宽度适配折叠
- 可选值 "hidden"：超出宽度时直接截断项目
- 可选值 "none"：强制显示所有项目，不触发折叠
maxItems（React 版本）/ max-items（Web Components 版本）：
- 手动设置最多显示的项目数量，当项目总数超过该值时，无论宽度是否充足都会触发折叠，优先级高于自动宽度检测
onRenderOverflowButton（React 版本）：自定义折叠后省略号按钮的渲染样式

代码示例（React 版本）

import { Breadcrumb, IBreadcrumbItem } from '@fluentui/react';

const breadcrumbItems: IBreadcrumbItem[] = [
  { text: '首页', key: 'home' },
  { text: '文档库', key: 'docs' },
  { text: '季度报告', key: 'reports' },
  { text: '2024 Q3', key: 'q3' },
  { text: '销售数据', key: 'sales' },
  { text: '最终报表', key: 'final' },
];

export default function AdaptiveBreadcrumbDemo() {
  return (
    <Breadcrumb
      items={breadcrumbItems}
      overflowMode="auto" // 开启自动折叠，默认值可省略
      // 可选：强制最多显示3个项目
      // maxItems={3}
    />
  );
}