TBreadcrumb / 面包屑

Breadcrumb shows the current page location within a navigation hierarchy. Supports multiple separator styles, muted mode, and icon integration. / 面包屑展示当前页面在导航层级中的位置，支持多种分隔符样式和图标集成。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
items	BreadcrumbItem[]	—	Breadcrumb items (required) / 面包屑项（必填）
separator	'default' | 'dots' | 'arrows' | 'bullets'	'default'	Separator style
muted	boolean	false	Muted (weakened) style

BreadcrumbItem 接口

interface BreadcrumbItem {
  text: string        // 显示文字
  href?: string       // 链接地址
  icon?: Icon         // 前置图标
  active?: boolean    // 是否为当前页（最后一项）
}

Basic Usage / 基础用法

<script setup lang="ts">
import { TBreadcrumb } from '@gulcc/tabler-vue'

const items = [
  { text: 'Home / 首页', href: '/' },
  { text: 'Products / 产品', href: '/products' },
  { text: 'Detail / 详情', active: true },
]
</script>

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

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TBreadcrumb } from '@gulcc/tabler-vue'
import { IconHome, IconFolder } from '@tabler/icons-vue'

const items = [
  { text: 'Home / 首页', icon: IconHome, href: '/' },
  { text: 'Projects / 项目', icon: IconFolder, href: '/projects' },
  { text: 'Current / 当前页', active: true },
]
</script>

<template>
  <!-- Default separator / 默认分隔符 -->
  <TBreadcrumb :items="items" />

  <!-- Dots separator / 点状分隔 -->
  <TBreadcrumb :items="items" separator="dots" />

  <!-- Arrows separator / 箭头分隔 -->
  <TBreadcrumb :items="items" separator="arrows" />

  <!-- Bullets separator / 圆点分隔 -->
  <TBreadcrumb :items="items" separator="bullets" />

  <!-- Muted style / 弱化样式 -->
  <TBreadcrumb :items="items" muted />
</template>

Tips / 避坑指南

• items is required — the component won't render without it
• The last item should have active: true for proper aria-current styling
• Icons are passed via icon prop in BreadcrumbItem, not as children
• separator only changes visual divider (/ → ··· → → → •)
• muted adds breadcrumb-muted class for reduced visual prominence