Remove citation markers and enhance breadcrumbs documentation with interactive examples

[Copilot]

This PR addresses two critical issues in the documentation:

🔧 Problem Fixed

The breadcrumbs.md file (and several other documentation files) contained strange AI-generated citation markers like 【718508456543957†L114-L121】 that made the documentation look unprofessional and hard to read. Additionally, the breadcrumbs documentation lacked comprehensive interactive examples that developers could easily copy and use.

✨ Changes Made

1. Citation Markers Cleanup

Removed all AI-generated citation markers from 6 documentation files:

• docs/breadcrumbs.md
• docs/accordion.md
• docs/avatar.md
• docs/badge.md
• docs/blocks.md
• docs/button.md

Before:

The Shadcn UI documentation describes the breadcrumb component as one that **"displays the path to the current resource using a hierarchy of links"**【718508456543957†L114-L121】.

After:

The Shadcn UI documentation describes the breadcrumb component as one that **"displays the path to the current resource using a hierarchy of links"**.

2. Enhanced Breadcrumbs Documentation

Added comprehensive interactive examples section with 4 different breadcrumb patterns:

Basic Breadcrumb

Standard implementation showing proper component structure with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, and BreadcrumbPage.

Custom Separator Breadcrumb

Example using ChevronRight icon instead of default separator for enhanced visual appeal.

Dropdown Breadcrumb

Advanced pattern with BreadcrumbEllipsis and dropdown menu for handling long breadcrumb trails.

Dynamic Breadcrumb

Practical implementation that auto-generates breadcrumbs from URL segments, perfect for Next.js applications.

Each example includes:

• Visual preview showing expected output
• Complete TypeScript code ready to copy-paste
• Proper import statements for all required components

3. Improved Installation & Setup Guide

• Added prerequisites section with proper shadcn/ui initialization
• Enhanced component structure documentation listing all available components
• Updated import statements to include BreadcrumbEllipsis and other missing components
• Added TypeScript support information

4. Comprehensive Best Practices

Expanded from basic guidelines to detailed recommendations covering:

• Design Guidelines: Clarity, consistency, visual hierarchy
• Accessibility: ARIA labels, screen readers, keyboard navigation
• Responsive Design: Mobile optimization, touch targets, overflow handling
• Performance: SEO considerations, structured data, preloading strategies
• Testing: Functional, visual, integration, and accessibility testing approaches

📊 Impact

• Documentation Quality: Professional, clean appearance without distracting citation markers
• Developer Experience: Copy-paste ready examples matching official shadcn.com patterns
• Comprehensive Coverage: From basic usage to advanced patterns like dropdown breadcrumbs
• Accessibility Focus: Enhanced guidelines for building inclusive breadcrumb navigation

The breadcrumbs documentation now provides the same level of quality and depth as official shadcn/ui documentation, making it a valuable resource for developers implementing navigation patterns.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.