syncfusion-react-breadcrumb

用途

Syncfusion React Breadcrumb 组件用于在应用中展示当前所处层级位置的导航路径（面包屑轨迹），并支持页面或区块之间的跳转。该技能适用于需要构建面包屑导航、处理路由跳转、展示站点层级结构的开发场景。

主要能力

导航控制：支持组件级与条目级的导航开启/关闭，可分别通过 enableNavigation、enableActiveItemNavigation 与条目 disabled 属性实现细粒度控制。
组件控制：可整体禁用组件、通过 activeItem 设置活动项、使用 cssClass 应用自定义 CSS 类。
条目级控制：可禁用单个条目、为条目添加图标（iconCss）、设置 id 用于标识、设置 url 与 text。
数据绑定：支持声明式绑定条目，也可通过组件的 url 属性从 URL 动态生成条目。
溢出模式：提供 6 种溢出处理策略：Menu、Collapsed、Scroll、Wrap、Hidden、None，默认值为 Menu，可配合 maxItems 控制最大可见条目数。
自定义：通过 itemTemplate 与 separatorTemplate 自定义条目和分隔符的渲染内容。
事件处理：提供 beforeItemRender、itemClick、created 三个事件。
国际化：通过 enableRtl 支持从右到左（RTL）语言渲染。
无障碍：支持键盘导航（Tab、Shift+Tab、Enter）与屏幕阅读器，符合 WCAG 2.2 指南。
图标集成：支持字体图标、图片与 SVG 图形。

使用方式

安装依赖包 @syncfusion/ej2-react-navigations，并引入样式文件（如 @syncfusion/ej2-base/styles/tailwind3.css 与 @syncfusion/ej2-navigations/styles/tailwind3.css）。基本用法为使用 BreadcrumbComponent、BreadcrumbItemsDirective 与 BreadcrumbItemDirective 组件组合，在条目中传入 text、url、iconCss 等属性。

关键组件级属性包括：enableNavigation（默认 true）、enableActiveItemNavigation（默认 false）、disabled（默认 false）、activeItem、cssClass、enableRtl（默认 false）、maxItems、overflowMode（默认 'Menu'）、items、itemTemplate、separatorTemplate、url。条目级属性包括：text（默认空字符串）、url（默认空字符串）、iconCss（默认 null）、disabled（默认 false）、id（默认空字符串）。

示例代码：

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective iconCss="e-icons e-home" url="/" />
        <BreadcrumbItemDirective text="Components" url="/components" />
        <BreadcrumbItemDirective text="Breadcrumb" url="/breadcrumb" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

常见模式包括：启用导航的面包屑、带图标的面包屑、处理溢出的面包屑（如 maxItems 与 overflowMode 配合）、组件级控制（禁用组件或程序化设置活动项）、条目级条件禁用。

适用场景

文件系统导航：展示当前文件夹路径，配合文件夹/文件图标。
电商产品路径：展示分类 → 子分类 → 产品的层级。
文档导航：在文档章节与页面之间导航。
多步骤表单：展示表单步骤与进度。
网站导航：展示当前页面在站点层级中的位置。

限制与注意事项

技能资料中未提供具体的收费、价格信息，也未说明平台限制；组件基于 React 使用，资料中提及支持 Vite 与 Create React App 环境、支持 TypeScript，但未列出全部依赖版本要求。集成 React Router 属于高级用法，资料中未展开具体实现细节，可参考对应参考文件。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项