syncfusion-react-breadcrumb

What this skill does

# Syncfusion React Breadcrumb Component Skill

## Table of Contents
1. [When to Use This Skill](#when-to-use-this-skill)
2. [Component Overview](#component-overview)
3. [Documentation and Navigation Guide](#documentation-and-navigation-guide)
4. [Quick Start Example](#quick-start-example)
5. [Common Patterns](#common-patterns)
6. [Key Props Reference](#key-props-reference)
7. [Common Use Cases](#common-use-cases)

## When to Use This Skill

Use this skill when you need to:
- Create breadcrumb navigation showing the current location in a hierarchical structure
- Enable navigation between different pages or sections in your application
- Handle breadcrumb item overflow with different strategies (Menu, Scroll, Collapsed, etc.)
- Customize breadcrumb appearance with icons, templates, or separators
- Implement accessible breadcrumb navigation with keyboard support
- Bind breadcrumb items dynamically from URLs or data
- Integrate breadcrumbs with routing libraries for single-page applications
- Disable entire breadcrumb or individual items conditionally
- Handle breadcrumb events and perform custom logic
- Apply RTL support for internationalization

## Component Overview

The Syncfusion React Breadcrumb component provides a flexible way to display navigation paths and breadcrumb trails in your application. Key capabilities include:

- **Navigation Support**: Enable or disable navigation with fine-grained control (component-level and item-level)
- **Component Control**: Enable/disable entire component, set active item, apply custom CSS classes
- **Item-Level Control**: Disable individual items, apply icons, set IDs for identification
- **Flexible Data Binding**: Bind items declaratively or generate from URLs dynamically
- **Overflow Modes**: Handle content overflow with 6 modes (Menu, Collapsed, Scroll, Wrap, Hidden, None)
- **Customization**: Use item templates and separator templates for rich, custom layouts
- **Event Handling**: 4 events (beforeItemRender, itemClick, created) with comprehensive arguments
- **Internationalization**: Full RTL support for right-to-left languages
- **Accessibility**: Full WCAG 2.2 compliance with keyboard navigation and screen reader support
- **Icon Integration**: Support for font icons, images, and SVG graphics
- **State Management**: Set active items programmatically, manage item enabled/disabled states

## Documentation and Navigation Guide

### API Properties and Events Reference
📄 **Read:** [references/api-properties-and-events.md](references/api-properties-and-events.md)

Complete API reference with code examples:
- All BreadcrumbComponent properties (activeItem, cssClass, disabled, enableNavigation, etc.)
- All BreadcrumbItem properties (disabled, iconCss, id, text, url)
- All component events (beforeItemRender, itemClick, created)
- Event arguments and usage examples
- All 6 overflow modes with examples
- Property and event summary tables

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)

Start here if you're new to Syncfusion Breadcrumb:
- Installation and dependencies setup
- Vite vs Create React App environment setup
- Adding CSS stylesheets and themes
- Creating your first basic breadcrumb component
- Adding items to breadcrumb
- TypeScript configuration and types

### Navigation and Routing
📄 **Read:** [references/navigation-and-routing.md](references/navigation-and-routing.md)

Use when you need to enable navigation:
- Enable or disable item navigation (enableNavigation property)
- Implement relative and absolute URLs
- Enable active item (last breadcrumb) navigation (enableActiveItemNavigation)
- Open URLs in new tabs using beforeItemRender
- Handle itemClick events
- Advanced routing integration with React Router

### Customization and Templates
📄 **Read:** [references/customization.md](references/customization.md)

Use when customizing the breadcrumb appearance:
- Overflow modes (Menu, Collapsed, Scroll, Wrap, Hidden, None)
- Item templates for rich content (itemTemplate property)
- Separator templates with custom icons (separatorTemplate)
- Managing maximum items display (maxItems property)
- Item-level disabling (disabled property)
- Styling and CSS classes (cssClass property)

### Icon Integration and Data Binding
📄 **Read:** [references/icon-integration-data-binding.md](references/icon-integration-data-binding.md)

Use when working with icons or dynamic data:
- Font icon implementation (Syncfusion icons with iconCss)
- Adding images and SVG graphics as icons
- Icon positioning (left, right, icon-only)
- Data binding from tag directives
- URL-based item generation (url property on component)
- Static URL configuration
- Customizing generated item text with beforeItemRender

### Accessibility
📄 **Read:** [references/accessibility.md](references/accessibility.md)

Use when implementing accessible breadcrumbs:
- WCAG 2.2 compliance guidelines
- ARIA attributes and roles
- Keyboard navigation support (Tab, Shift+Tab, Enter)
- Screen reader optimization
- Right-to-left (RTL) support (enableRtl property)
- Testing with accessibility tools

## Quick Start Example

Here's a minimal working example to get started:

```tsx
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective iconCss="e-icons e-home" url="/" />
        <BreadcrumbItemDirective text="Components" url="/components" />
        <BreadcrumbItemDirective text="Breadcrumb" url="/breadcrumb" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}
```

## Common Patterns

### Pattern 1: Navigation Enabled Breadcrumb

Enable user navigation by setting `enableNavigation={true}` and providing URLs:

```tsx
<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Products" url="../products" />
    <BreadcrumbItemDirective text="Category" url="../products/category" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>
```

### Pattern 2: Breadcrumb with Icons

Add visual context with icon-based breadcrumbs:

```tsx
<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" />
    <BreadcrumbItemDirective iconCss="e-bicons e-folder" text="Folder" />
    <BreadcrumbItemDirective iconCss="e-bicons e-file" text="Document" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>
```

### Pattern 3: Handling Overflow

Use overflow modes for responsive breadcrumb trails:

```tsx
<BreadcrumbComponent maxItems={3} overflowMode="Menu" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" />
    <BreadcrumbItemDirective text="Folder 1" />
    <BreadcrumbItemDirective text="Folder 2" />
    <BreadcrumbItemDirective text="Folder 3" />
    <BreadcrumbItemDirective text="File" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>
```

### Pattern 4: Component-Level Control

Disable entire component or set active item programmatically:

```tsx
import { useState } from 'react';

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);
  const [activeUrl, setActiveUrl] = useState('/products');

  return (
    <div>
      <BreadcrumbComponent 
        disabled={isDisabled}
        activeItem={activeUrl}
        enableNavigation={true}
      >
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective text="Home" url="/" />
          <BreadcrumbItemDirective text="Products" url="/products" />
          <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
        </BreadcrumbItemsDirective>
      <