Breadcrumb

Matches Arco Breadcrumb with subtle hover backgrounds on linked items. See the Element Plus docs for props.

Basic Hierarchy

The final item represents the current page; linked items navigate normally.

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>

Icon Separator

Separator-icon replaces text separators with an Element Plus icon.

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>

Differences from Arco

• The default separator is a text slash rather than Arco's slash icon; separator-icon can replace it.