Breadcrumb 面包屑

新粗野主义风格的面包屑导航组件，基于 Reka UI 的面包屑原语构建，适用于展示多级页面树，特别在中后台 Dashboard 等复杂嵌套场景中作为标配导航。

默认链接以完整边框、底色和硬阴影呈现为实体标签。悬停时改变底色，按压时文字与边框整体向阴影方向移动并收起阴影；当前页使用强调色底和较小硬阴影。folder 变体保留底边开口的插片外观与平面层次，悬停时同样提供底色反馈。

预览

Preview

1. 首页
2. /
3. 组件
4. /
5. 更多
6. /
7. 导航
8. /
9. 面包屑

安装

pnpm dlx brutx-vue@latest add breadcrumb

用法

<script setup>
import {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbPage,
    BreadcrumbSeparator,
    BreadcrumbEllipsis
} from 'brutx-ui-vue'
</script>

<template>
    <Breadcrumb>
        <BreadcrumbList>
            <BreadcrumbItem>
                <BreadcrumbLink href="/">首页</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbLink href="/components">组件</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbPage>面包屑</BreadcrumbPage>
            </BreadcrumbItem>
        </BreadcrumbList>
    </Breadcrumb>
</template>

折叠省略

当页面层级非常多时，可以使用 BreadcrumbEllipsis 来折叠中间不太重要的页面。该组件为纯展示省略号指示（role="presentation"，无可交互语义）；如需点击展开等交互，请自行包裹 DropdownMenu 等触发组件。

<template>
    <Breadcrumb>
        <BreadcrumbList>
            <BreadcrumbItem>
                <BreadcrumbLink href="#">首页</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <!-- 折叠省略指示（纯展示，无交互） -->
                <BreadcrumbEllipsis />
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbPage>当前页面</BreadcrumbPage>
            </BreadcrumbItem>
        </BreadcrumbList>
    </Breadcrumb>
</template>

子组件

组件	说明
Breadcrumb	根容器
BreadcrumbList	面包屑列表容器
BreadcrumbItem	单个面包屑项容器
BreadcrumbLink	可点击的链接项
BreadcrumbPage	当前页面标识（不可点击）
BreadcrumbSeparator	分隔符，默认渲染正斜杠 /
BreadcrumbEllipsis	省略号指示（纯展示），用于折叠中间层级

API 参考

Breadcrumb

Breadcrumb — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到面包屑导航 <nav> 根元素的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/Breadcrumb.vue 解析值 undefined 来源 Breadcrumb.vue:7 packages/ui/src/components/breadcrumb/Breadcrumb.vue

Breadcrumb — 插槽

名称	签名或类型	说明
#default	{}	面包屑导航的子组件，通常包含 BreadcrumbList。
详情 声明类型 {} 来源 Breadcrumb.vue packages/ui/src/components/breadcrumb/Breadcrumb.vue

BreadcrumbEllipsis

BreadcrumbEllipsis — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到省略号展示元素的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue 解析值 undefined 来源 BreadcrumbEllipsis.vue:10 packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
iconSize	IconSize | undefined	"md"	默认省略图标的尺寸，使用项目的 IconSize 预设。
详情 声明类型 IconSize | undefined 字面量 "2xl" "lg" "md" "sm" "xl" "xs" 关联类型 IconSize 类型定义 — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情 声明 'md' 来源: packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue 解析值 "md" 来源 BreadcrumbEllipsis.vue:11 packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue

BreadcrumbEllipsis — 插槽

名称	签名或类型	说明
#default	{}	替换默认 MoreHorizontal 图标；自定义内容应提供合适的可访问名称。
详情 声明类型 {} 来源 BreadcrumbEllipsis.vue packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue

BreadcrumbItem

BreadcrumbItem — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到表示单个面包屑条目的 <li> 元素的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbItem.vue 解析值 undefined 来源 BreadcrumbItem.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbItem.vue

BreadcrumbItem — 插槽

名称	签名或类型	说明
#default	{}	单个面包屑条目的内容，通常是链接或当前页面。
详情 声明类型 {} 来源 BreadcrumbItem.vue packages/ui/src/components/breadcrumb/BreadcrumbItem.vue

BreadcrumbLink

BreadcrumbLink — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到链接或被 asChild 接管的子元素的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue 解析值 undefined 来源 BreadcrumbLink.vue:8 packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
asChild	boolean | undefined	false	使用 Reka UI Primitive 的子元素组合方式，将本组件的属性和行为合并到唯一子元素上。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue 解析值 false 来源 BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
as	AsTag | Component | undefined	"a"	选择链接渲染的 HTML 标签或组件；asChild 生效时由子元素决定渲染目标。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 声明 'a' 来源: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue 解析值 "a" 来源 BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue

BreadcrumbLink — 插槽

名称	签名或类型	说明
#default	{}	链接可见文本或内容。
详情 声明类型 {} 来源 BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue

BreadcrumbList

BreadcrumbList — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到有序列表 <ol> 的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbList.vue 解析值 undefined 来源 BreadcrumbList.vue:9 packages/ui/src/components/breadcrumb/BreadcrumbList.vue
variant	"default" | "folder" | undefined	"default"	default 使用常规列表样式；folder 将链接呈现为档案文件夹标签插片。
详情 声明类型 "default" | "folder" | undefined 字面量 "default" "folder" 默认值详情 声明 'default' 来源: packages/ui/src/components/breadcrumb/BreadcrumbList.vue 解析值 "default" 来源 BreadcrumbList.vue:11 packages/ui/src/components/breadcrumb/BreadcrumbList.vue

BreadcrumbList — 插槽

名称	签名或类型	说明
#default	{}	面包屑条目和分隔符；子项应为有序列表允许的列表项组件。
详情 声明类型 {} 来源 BreadcrumbList.vue packages/ui/src/components/breadcrumb/BreadcrumbList.vue

BreadcrumbPage

BreadcrumbPage — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到当前页面 <span> 的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbPage.vue 解析值 undefined 来源 BreadcrumbPage.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbPage.vue

BreadcrumbPage — 插槽

名称	签名或类型	说明
#default	{}	当前页面名称；组件会以 aria-current="page" 标记且不渲染为链接。
详情 声明类型 {} 来源 BreadcrumbPage.vue packages/ui/src/components/breadcrumb/BreadcrumbPage.vue

BreadcrumbSeparator

BreadcrumbSeparator — 属性

名称	类型	默认值	说明
class	string | undefined	undefined	追加到分隔符列表项的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue 解析值 undefined 来源 BreadcrumbSeparator.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue

BreadcrumbSeparator — 插槽

名称	签名或类型	说明
#default	{}	自定义分隔符内容；未提供时显示正斜杠 /。该项从无障碍树中隐藏。
详情 声明类型 {} 来源 BreadcrumbSeparator.vue packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue

可访问性

• 键盘操作：链接项支持 Tab 键导航，Enter 键激活
• ARIA 属性：自动添加 aria-label="面包屑" 到导航容器，aria-current="page" 标识当前页面
• 语义化结构：使用 <nav> 元素包裹，<ol> 列表结构符合 WAI-ARIA 面包屑规范