breadcrumb · glass-apple · 灵感来源：Carbon Breadcrumb / GOV.UK breadcrumbs
前两级可点，当前位置不可点
长标签：每级都能截断，不把行撑破
Breadcrumb · 玻璃面包屑 · 面包屑 / Glass
做一个 Breadcrumb（玻璃面包屑）：
- nav aria-label + ol/li；分隔符 aria-hidden，当前位置 aria-current=page 且不可点
- 中间层没有 href 时退化为文本，不造假链接
- 每级独立 truncate，长标签不撑破整行
- 材质只改悬停：玻璃给一层 glass-highlight 底
用这些 CSS 变量：--color-text --color-text-muted --color-text-subtle --glass-highlight
灵感参考：Carbon Breadcrumb / GOV.UK breadcrumbs--color-text --color-text-muted --color-text-subtle --glass-highlight
焦点
/r/breadcrumb--glass-apple.json
免外壳的 markdown 版：/llms/components/breadcrumb--glass-apple.mdnav aria-label="面包屑" + ol / li；分隔符是装饰，aria-hiddenaria-current="page" 且不可点；中间层没有 href 时退化成纯文本，不造一个假链接truncate：长分类名截断自己，不把整行撑破--glass-highlight 底interface Props {
items: { label: string; href?: string }[];
className?: string;
}
/** 面包屑：层级用 ol，当前位置用 aria-current，分隔符对读屏隐藏 */
export function GlassAppleBreadcrumb({ 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-colors
hover:bg-[var(--glass-highlight)]
"
>
{item.label}
</a>
)}
</li>
);
})}
</ol>
</nav>
);
}
src/components/breadcrumb/glass-apple/