面包屑 Breadcrumb

概览

面包屑（Breadcrumb）组件显示当前页面的导航路径，帮助用户了解其在网站层级结构中所处的位置。

实时预览

首页
组件库
面包屑

---

使用方法

示例代码

import { Breadcrumb } from '@goenhance/cms-ui';

export default function MyPage() {
  return (
    <Breadcrumb
      list={[
        { url: '/', text: '首页' },
        { url: '/products', text: '产品' },
        { url: '/products/shoes', text: '鞋类' },
      ]}
    />
  );
}

属性说明 (Props)

BreadcrumbProps

属性名	类型	描述
list	BreadcrumbItem[]	面包屑项目数组

BreadcrumbItem

属性名	类型	描述
url	string	面包屑链接的 URL
text	string	面包屑显示的文本

特性

• 当前页自动高亮: 面包屑中的最后一项以纯文本形式显示（非链接）。
• 分隔符图标: 自动在项目之间添加分隔符。
• 响应式设计: 支持各种屏幕尺寸。
• 无障碍访问: 使用语义化的 HTML 和 ARIA 属性。

代码示例

const breadcrumbItems = [
  { url: '/', text: '首页' },
  { url: '/docs', text: '文档' },
  { url: '/docs/components', text: '组件库' },
  { url: '/docs/components/breadcrumb', text: '面包屑' },
];

<Breadcrumb list={breadcrumbItems} />