开发预览更新于 2026-05-10

Breadcrumb 面包屑

当前位置链路导航，最后一项为当前页（不可点），支持自定义分隔符。

基础用法

items 数组每项 { label, href? }。最后一项不论是否带 href 都被渲染成当前页（不可点）。

背景

<script setup lang="ts">
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '组件', href: '/components/' },
  { label: 'Breadcrumb 面包屑' },
];
</script>

<template>
  <CfBreadcrumb :items="items" />
</template>

<script setup>
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '组件', href: '/components/' },
  { label: 'Breadcrumb 面包屑' },
];
</script>

<template>
  <CfBreadcrumb :items="items" />
</template>

const items = [
{ label: '首页', href: '/' },
{ label: '组件', href: '/components/' },
{ label: 'Breadcrumb 面包屑' },
];

<CfBreadcrumb items={items} />

const items = [
{ label: '首页', href: '/' },
{ label: '组件', href: '/components/' },
{ label: 'Breadcrumb 面包屑' },
];

<CfBreadcrumb items={items} />

自定义分隔符

separator 默认 /，常用 › / · / →。任何字符都行。

背景

<script setup lang="ts">
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '设置', href: '/settings/' },
  { label: '账号' },
];
</script>

<template>
  <div class="demo-stack">
    <CfBreadcrumb :items="items" separator="/" />
    <CfBreadcrumb :items="items" separator="›" />
    <CfBreadcrumb :items="items" separator="·" />
    <CfBreadcrumb :items="items" separator="→" />
  </div>
</template>

<script setup>
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '设置', href: '/settings/' },
  { label: '账号' },
];
</script>

<template>
  <div class="demo-stack">
    <CfBreadcrumb :items="items" separator="/" />
    <CfBreadcrumb :items="items" separator="›" />
    <CfBreadcrumb :items="items" separator="·" />
    <CfBreadcrumb :items="items" separator="→" />
  </div>
</template>

<CfBreadcrumb items={items} separator="/" />
<CfBreadcrumb items={items} separator="›" />
<CfBreadcrumb items={items} separator="·" />
<CfBreadcrumb items={items} separator="→" />

<CfBreadcrumb items={items} separator="/" />
<CfBreadcrumb items={items} separator="›" />
<CfBreadcrumb items={items} separator="·" />
<CfBreadcrumb items={items} separator="→" />

长链路

层级较深时，前几项变成可点击链接，最后一项是当前位置。

背景

<script setup lang="ts">
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '组织', href: '/orgs/' },
  { label: '某团队', href: '/orgs/team-x/' },
  { label: '项目', href: '/orgs/team-x/projects/' },
  { label: '深层目录' },
];
</script>

<template>
  <CfBreadcrumb :items="items" separator="›" />
</template>

<script setup>
import { CfBreadcrumb } from '@chufix-design/vue';

const items = [
  { label: '首页', href: '/' },
  { label: '组织', href: '/orgs/' },
  { label: '某团队', href: '/orgs/team-x/' },
  { label: '项目', href: '/orgs/team-x/projects/' },
  { label: '深层目录' },
];
</script>

<template>
  <CfBreadcrumb :items="items" separator="›" />
</template>

<CfBreadcrumb items={items} separator="›" />

<CfBreadcrumb items={items} separator="›" />

API

Prop	类型	默认值	说明
`items`	`Array<{ label: string; href?: string }>`	`[]`	链路项；最后一项作为当前页
`separator`	`string`	`'/'`	分隔符；常用 `›` `·` 或自定义