面包屑 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} />

---

主题覆盖

可覆盖变量

类名：mewx-cms-breadcrumb

变量名	用途	默认值
--mewx-cms-breadcrumb-text	默认文字色	var(--blocks-text-muted)
--mewx-cms-breadcrumb-link-text	链接文字色	var(--blocks-text-body)
--mewx-cms-breadcrumb-link-hover-text	链接悬停色	var(--blocks-primary)
--mewx-cms-breadcrumb-current-text	当前项文字色	var(--blocks-text-heading)
--mewx-cms-breadcrumb-separator-text	分隔符颜色	var(--blocks-text-light)
--mewx-cms-breadcrumb-font-size	字体大小	0.875rem

覆盖示例

/* 蓝色面包屑 */
.blue-breadcrumb {
  --mewx-cms-breadcrumb-link-text: 59 130 246;
  --mewx-cms-breadcrumb-link-hover-text: 37 99 235;
  --mewx-cms-breadcrumb-current-text: 59 130 246;
}

/* 大号面包屑 */
.big-breadcrumb {
  --mewx-cms-breadcrumb-font-size: 1rem;
}

<Breadcrumb className="blue-breadcrumb" list={breadcrumbItems} />