Preview Updated 2026-05-10

Breadcrumb

Location-trail navigation; the last item is the current page (not clickable) and the separator is customizable.

Basic usage

Each items entry is { label, href? }. The last entry is rendered as the current page (not clickable) regardless of whether href is provided.

背景

src/App.vue

<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>

import { CfBreadcrumb } from '@chufix-design/react';

export default function Demo() {
  const items = [
    { label: '首页', href: '/' },
    { label: '组件', href: '/components/' },
    { label: 'Breadcrumb 面包屑' },
  ];
  return (
    <>
      const items = [
      { label: 'Home', href: '/' },
      { label: 'Components', href: '/components/' },
      { label: 'Breadcrumb' },
      ];
      <CfBreadcrumb items={items} />
    </>
  );
}

Custom separator

separator defaults to /; common alternatives are › / · / →. Any character works.

背景

src/App.vue

<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>

import { CfBreadcrumb } from '@chufix-design/react';

export default function Demo() {
  const items = [
    { label: '首页', href: '/' },
    { label: '设置', href: '/settings/' },
    { label: '账号' },
  ];
  return (
    <>
      <CfBreadcrumb items={items} separator="/" />
      <CfBreadcrumb items={items} separator="›" />
      <CfBreadcrumb items={items} separator="·" />
      <CfBreadcrumb items={items} separator="→" />
    </>
  );
}

Long trails

For deeper hierarchies the leading items become clickable links and the last is the current location.

背景

src/App.vue

<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>

import { CfBreadcrumb } from '@chufix-design/react';

export default function Demo() {
  const items = [
    { label: '首页', href: '/' },
    { label: '组织', href: '/orgs/' },
    { label: '某团队', href: '/orgs/team-x/' },
    { label: '项目', href: '/orgs/team-x/projects/' },
    { label: '深层目录' },
  ];
  return (
    <>
      <CfBreadcrumb items={items} separator="›" />
    </>
  );
}

API

Prop	Type	Default	Description
`items`	`Array<{ label: string; href?: string }>`	`[]`	Trail items; the last entry is the current page
`separator`	`string`	`'/'`	Separator; common values include `›` `·` or any custom character