Breadcrumb

展示当前页面的层级路径，帮助用户理解所在位置并返回上级页面。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于表达当前页面的层级路径。平级内容切换用 Tab，应用导航用 Sidebar；路由跳转由页面处理。

items 生成路径，最后一项自动成为不可交互的当前页。
显式 children 使用 Button as="item" 与 Text as="separator"，会替换 items；parts 仅配置默认生成的内容。
根导航默认名称随LocaleProvider更新，显式ariaLabel优先；路径文字与业务内容保持调用方原文。

import { Breadcrumb } from '@snowui-design-system/components';

属性	类型	默认值	示例	描述
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	根导航区域的无障碍标签；省略时随LocaleProvider更新，显式ariaLabel优先
`gap`	`number`	`—`	`gap={42}`	继承 Frame 的间距 token 索引，设置路径元素的首选行／列间距；省略保留原首选值，有效间距至少为 4 CSS px，显式零与根字号／间距缩放不压低下限；更大首选间距及根容器原换行合同保留。
`variant`	`BreadcrumbVariant`	`"borderless"`	`variant={value}`	内部 `Button as="item"` 的默认 Button 变体；parts 与子级 Button 显式 `variant` 可覆盖
`children`	`Snippet`	`—`	`<Breadcrumb>Content</Breadcrumb>`	显式声明 Button as="item" 与 Text as="separator"，替换内建 items 与 separator；最后一个 item 仍自动成为当前页。
`items`	`BreadcrumbItem[]`	`[]`	`items={items}`	内建路径数据，每项含 label、可选 href/disabled；自动生成 Button 与分隔 Text，最后一项为不可交互的当前页。children 存在时忽略此数组。
`separator`	`string`	`"/"`	`separator="Example"`	内建路径项之间的分隔文字；仅在 items 模式使用，显式组合时自行声明 as="separator"。
`parts`	`ComponentPartsOf<{ Button: typeof Button; Text: typeof Text }>`	`—`	`parts={partsOptions}`	配置 items 模式生成的 Button 与分隔 Text；不作用于显式 children，当前页及角色语义仍由 Breadcrumb 接管。