Breadcrumb 面包屑

显示当前页面在导航层级中的位置。

?

名称	分类	说明	类型	默认值
BreadcrumbItemicon	? 风格	图标名称（支持所有内置像素图标）	string	—
BreadcrumbItemdisabled	? 状态	是否禁用	boolean	false
separator	? 内容	分隔符文本	string	'/'
BreadcrumbItemto	? 内容	链接地址，设置后将渲染为 <a> 标签	string	—
default	? 插槽	面包屑项内容		—
separator	? 插槽	自定义分隔符内容		—
BreadcrumbItemdefault	? 插槽	面包屑项文本内容		—

基础用法

最简单的面包屑导航。设置了 to 属性的项目会渲染为链接，最后一个项目（没有 to）显示为当前页面。

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
    <px-breadcrumb-item>Current Page</px-breadcrumb-item>
  </px-breadcrumb>
</template>

带图标

使用 icon 属性为面包屑项目添加像素图标。

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#" icon="home">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#" icon="folder">Documents</px-breadcrumb-item>
    <px-breadcrumb-item icon="file">Current File</px-breadcrumb-item>
  </px-breadcrumb>
</template>

禁用状态

使用 disabled 属性禁用某个面包屑项目，禁用后不可点击。

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#" disabled>Products</px-breadcrumb-item>
    <px-breadcrumb-item>Current Page</px-breadcrumb-item>
  </px-breadcrumb>
</template>

自定义分隔符

使用 separator 属性设置简单的文本分隔符，或使用 #separator 插槽自定义分隔符组件（例如图标）。

<script setup lang="ts"></script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <px-breadcrumb separator=">">
      <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
      <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
      <px-breadcrumb-item>Detail</px-breadcrumb-item>
    </px-breadcrumb>

    <px-breadcrumb>
      <template #separator>
        <px-icon icon="chevron-right" />
      </template>
      <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
      <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
      <px-breadcrumb-item>Detail</px-breadcrumb-item>
    </px-breadcrumb>
  </div>
</template>