El Breadcrumb

Breadcrumb Component

Breadcrumb component displays the location of the current page, making it easier to browse back through navigation hierarchy.

When to Use

• Page navigation paths
• Category hierarchies
• Document structures
• Multi-level navigation

Basic Usage

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  </el-breadcrumb>
</template>

Icon Separator

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  </el-breadcrumb>
</template>

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

API Reference

Breadcrumb Attributes

Breadcrumb Slots

BreadcrumbItem Attributes

BreadcrumbItem Slots

Common Patterns

Dynamic Breadcrumb

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="item.path">
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => {
  return route.matched.filter(r => r.meta?.title).map(r => ({
    path: r.path,
    title: r.meta.title
  }))
})
</script>

Best Practices

1. Use to prop for vue-router integration
2. Use separator-icon for custom separators
3. Keep breadcrumb paths concise and meaningful