skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

el-breadcrumb

Display breadcrumb navigation in Vue apps from router matches.

21|2|Updated Mar 13, 2026
Search Tags:#routing#vue#navigation#breadcrumb#element-plus#ui-component
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-breadcrumb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-breadcrumb
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-breadcrumb
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadcrumbs help users understand their current location within a website and navigate back through multi-level hierarchies with a clear, consistent UI.

Core Features & Use Cases

  • Dynamic Breadcrumb: Build trails from the current route and matched records.
  • Separator customization: Support custom separators or an icon-based separator.
  • Vue Router integration: Use the to prop on el-breadcrumb-item to enable navigation between routes.
  • Use Case: Admin dashboards, product catalogs, or documentation sites with hierarchical content.

Quick Start

Provide a route path using the to prop on el-breadcrumb-item to render a breadcrumb trail.

Frequently Asked Questions about el-breadcrumb

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display breadcrumb navigation dynamically from Vue Router matches?▼

To display breadcrumb navigation dynamically, build the breadcrumb trails by extracting the current route path and matched records from Vue Router, rendering each matched level as an el-breadcrumb-item to reveal the current page location.

How do I customize separators between breadcrumb items in an Element Plus UI component?▼

Customizing separators between breadcrumb items involves configuring the separator attribute on the breadcrumb UI component, allowing you to use text characters or icon-based separators to visually divide the hierarchical navigation trail.

Does el-breadcrumb work with vue-router for back navigation across hierarchical pages?▼

Yes, el-breadcrumb integrates directly with vue-router for back navigation by using the to prop on el-breadcrumb-item, enabling users to navigate between routes across hierarchical pages within Vue apps.

When do I need breadcrumb navigation in a Vue app?▼

You need breadcrumb navigation in a Vue app when users must understand their current location within multi-level hierarchies, such as in admin dashboards, product catalogs, or documentation sites, and navigate back with a consistent UI.

What is the best way to structure a YAML frontmatter for a Vue UI component?▼

The best way to structure a YAML frontmatter for a Vue UI component is to include the required name and description fields, using the body section to document usage patterns and API references for rendering the component correctly.

Related Skills

Explore More Software Engineering Skills→
wepn13232wepn13232
7

element-plus-breadcrumb

Document Element Plus Breadcrumb attributes, slots, and router integration for Vue projects.

Community
Basic
trusted-americantrusted-american

ember-page-title-breadcrumbs

Synchronize route-based page titles and breadcrumbs in Ember apps.

Official
Intermediate
e-xodee-xode
3

vuetify-layout

Implement Vuetify 4 app shells with navigation, grids, and tabs for Vue SSR pages.

Official
Intermediate
partme-aipartme-ai
610

vue-router-v4

Configure Vue Router v4 routes, navigation guards, and dynamic matching for Vue 3.

Official
Intermediate