cpn-basic-breadcrumb

Implement and configure the UDesign Breadcrumb component in React pages.

1|Updated Apr 14, 2026

Search Tags:#ui #accessibility #react #navigation #best-practices #design-system #breadcrumb

Ready to run

npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-breadcrumb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cpn-basic-breadcrumb
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-breadcrumb
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

使用 UDesign Breadcrumb 组件及其子组件 Item 时，提供规范化的实现路径，帮助 AI 与开发者避免常见错配与行为偏差，确保一致性与可维护性。

Core Features & Use Cases

引入方式：给出组件引入与子组件的搭配示例，遵循全局规范与风格。
基本用法：演示 Breadcrumb、Breadcrumb.BackButton、Breadcrumb.Item 的基本组合与常见场景。
API 参数与最佳实践：提供关键参数、对比不同 styleType 的用法，并给出常见问题的解答与注意事项。
演示用例：包含多种演示情景，帮助快速理解导航层级的实现。

Quick Start

在你的应用中引入 Breadcrumb 组件并展示基本导航用法。

Frequently Asked Questions about cpn-basic-breadcrumb

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

FAQPage Schema

How do I implement breadcrumb navigation in a React application?▼

To implement breadcrumb navigation in a React application, import the UDesign Breadcrumb component and its subcomponents, then combine Breadcrumb, Breadcrumb.BackButton, and Breadcrumb.Item to display clear hierarchical paths. This ensures consistent styling and predictable behavior across pages.

What is the best way to use different styleTypes for breadcrumb components?▼

The best way to use different styleTypes for breadcrumb components is to reference the provided API parameter documentation, which compares various styleType configurations. Applying these best practices ensures consistent UI design and prevents common misconfigurations during implementation.

When should I use a back button alongside breadcrumb navigation?▼

You should use a back button alongside breadcrumb navigation when your UI requires both hierarchical path tracking and quick backward page transitions. The Breadcrumb.BackButton subcomponent provides this specific navigation functionality while maintaining the overall design system's consistency.

Does the UDesign Breadcrumb component support accessibility best practices?▼

Yes, the UDesign Breadcrumb component supports accessibility best practices by providing standardized implementation patterns. Following the specified frontmatter metadata and API parameter configurations ensures your hierarchical navigation remains accessible and predictable for all users.

Why does my breadcrumb component show incorrect hierarchical paths?▼

Your breadcrumb component may show incorrect hierarchical paths due to improper configuration of Breadcrumb.Item subcomponents. Reviewing the provided demonstration examples and manual usage instructions helps correct item nesting and ensures accurate hierarchical navigation representation.

Can I use this breadcrumb component without external dependencies?▼

Yes, you can use this breadcrumb component without external dependencies, as the metadata specifies an empty dependencies array. It operates independently within your React environment to provide standardized UI navigation and styling.