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

  
    homepage
    promotion management
    promotion list
    promotion detail
  

Icon Separator

  
    homepage
    promotion management
    promotion list
  

import { ArrowRight } from '@element-plus/icons-vue'

API Reference

Breadcrumb Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | separator | Separator character | string | '/' | | separator-icon | Icon component for separator | string \| Component | — |

Breadcrumb Slots

| Name | Description | Subtags | |------|-------------|---------| | default | Customize default content | Breadcrumb Item |

BreadcrumbItem Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | to | Target route, same as vue-router to | string \| RouteLocationRaw | '' | | replace | If true, navigation won't leave history record | boolean | false |

BreadcrumbItem Slots

| Name | Description | |------|-------------| | default | Customize default content |

Common Patterns

Dynamic Breadcrumb

  
    
      {{ item.title }}
    
  

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
  }))
})

Best Practices

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.