Breadcrumb 面包屑

面包屑用于显示当前页面在网站/应用中的层级位置，帮助用户理解网站结构并快速导航。

基础用法

通过 items 属性传入面包屑项数组。最后一项应设置 active 标记当前页面。

<TBreadcrumb :items="[
  { text: 'Home', href: '#/' },
  { text: 'Library', href: '#/library' },
  { text: 'Data', active: true },
]"/>

分隔符样式

通过 separator 属性切换分隔符样式：dots（点状）、arrows（箭头）、bullets（圆点）。

点状分隔符 (dots)

<TBreadcrumb separator="dots" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

箭头分隔符 (arrows)

<TBreadcrumb separator="arrows" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

圆点分隔符 (bullets)

<TBreadcrumb separator="bullets" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

带图标

每个面包屑项可通过 icon 属性传入图标组件（来自 @tabler/icons-vue）。

<TBreadcrumb :items="[
    { text: 'Home', href: '/', icon: IconHome },
    { text: 'Library', href: '#', icon: IconFolder },
    { text: 'Data', active: true, icon: IconFile },
  ]"></TBreadcrumb>

Muted（弱化）样式

设置 muted 属性启用弱化样式，适合用于非主要导航区域。

<TBreadcrumb muted :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

API

Props

Prop	说明	类型	默认值
items	面包屑项列表	BreadcrumbItem[]	[]
separator	分隔符样式	'default' | 'dots' | 'arrows' | 'bullets'	'default'
muted	启用弱化样式	boolean	false

BreadcrumbItem 类型

属性	说明	类型	默认值
text	显示文本	string	—
href	链接地址（不传则渲染为 <span>）	string	undefined
icon	图标组件	Component	undefined
active	是否激活	boolean	false

Slots

插槽	说明
item-{index}	自定义单个面包屑项内容，作用域参数 { item }