面包屑 Breadcrumb

对应 Arco Breadcrumb，可点击项在悬停时显示浅色背景。 属性用法见 Element Plus 文档。

基础层级

最后一项表示当前页面，链接项可按正常方式跳转。

Home/Components/Breadcrumb/

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="/">Home</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="/components/button">Components</a></el-breadcrumb-item>
    <el-breadcrumb-item>Breadcrumb</el-breadcrumb-item>
  </el-breadcrumb>
</template>

图标分隔

separator-icon 使用 Element Plus 图标替换文字分隔符。

HomeProjectsDetails

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item>Home</el-breadcrumb-item>
    <el-breadcrumb-item>Projects</el-breadcrumb-item>
    <el-breadcrumb-item>Details</el-breadcrumb-item>
  </el-breadcrumb>
</template>

与 Arco 的差异

• 默认分隔符是文字斜线，Arco 使用斜线图标；可通过 separator-icon 自定义。