# 拟态面包屑（Breadcrumb）

- 类型 / 材质：`breadcrumb` / `neumorphic`（新拟态）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：Neumorphism（悬停压成凹槽）
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/breadcrumb/neumorphic` ｜ 条目：`/r/breadcrumb--neumorphic.json`
- 必缺状态：焦点
- 整页场景：尚未接入

## 规格

- 同一份 props（items）
- 悬停压一层内阴影，与拟态按钮同动作
- 语义结构同玻璃面包屑

## 参数（CSS 变量）

`--color-text` `--color-text-muted` `--color-text-subtle` `--neuro-dark` `--neuro-light`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `items` | `{ label: string; href?: string }[]` | 必填 | — |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「拟态面包屑」— Breadcrumb（面包屑 / Neumorphic）
灵感来源：Neumorphism（悬停压成凹槽）
规格：
- 同一份 props（items）
- 悬停压一层内阴影，与拟态按钮同动作
- 语义结构同玻璃面包屑
参数（CSS 变量）：--color-text --color-text-muted --color-text-subtle --neuro-dark --neuro-light
必缺状态：焦点
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/breadcrumb/neumorphic · 标准 interaction /design#interaction · 调研笔记 /showcase/component/breadcrumb/neumorphic#notes
```

## 调研笔记

interface Props {
  items: { label: string; href?: string }[];
  className?: string;
}

/** 面包屑：层级用 ol，当前位置用 aria-current，分隔符对读屏隐藏 */
export function NeumorphicBreadcrumb({ items, className = '' }: Props) {
  return (
    <nav aria-label="面包屑" className={className}>
      <ol className="flex flex-wrap items-center gap-1.5 text-xs">
        {items.map((item, i) => {
          const last = i === items.length - 1;
          return (
            <li key={item.label} className="flex items-center gap-1.5 min-w-0">
              {i > 0 && (
                <span aria-hidden="true" className="text-[var(--color-text-subtle)]">
                  /
                </span>
              )}
              {last || !item.href ? (
                <span
                  aria-current={last ? 'page' : undefined}
                  className={`truncate ${last ? 'text-[var(--color-text)]' : 'text-[var(--color-text-muted)]'}`}
                >
                  {item.label}
                </span>
              ) : (
                <a
                  href={item.href}
                  className="
                    truncate px-1 -mx-1 rounded
                    text-[var(--color-text-muted)] hover:text-[var(--color-text)]
                    transition-shadow
                    hover:shadow-[inset_1px_1px_2px_var(--neuro-dark),inset_-1px_-1px_2px_var(--neuro-light)]
                  "
                >
                  {item.label}
                </a>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}