Syncfusion React Breadcrumb Component Skill

Table of Contents

1. When to Use This Skill
2. Component Overview
3. Documentation and Navigation Guide
4. Quick Start Example
5. Common Patterns
6. Key Props Reference
7. Common Use Cases

When to Use This Skill

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

enableNavigation={true}

<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

<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

<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

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>
      </BreadcrumbComponent>
    </div>
  );
}

Pattern 5: Item-Level Disabling

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" disabled={false} />
    <BreadcrumbItemDirective text="Products" url="/products" disabled={false} />
    <BreadcrumbItemDirective text="Admin Only" url="/admin" disabled={!isAdmin} />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Key Props Reference

Component-Level Properties

enableNavigation

enableActiveItemNavigation

disabled

activeItem

cssClass

enableRtl

maxItems

overflowMode

items

itemTemplate

separatorTemplate

url

Item-Level Properties

text

url

iconCss

disabled

id

Events

beforeItemRender

itemClick

created

Common Use Cases

1. File System Navigation: Display current folder path with folder/file icons
2. E-commerce Product Path: Show category → subcategory → product hierarchy
3. Documentation Navigation: Navigate through documentation sections and pages
4. Multi-step Forms: Display form steps and progress
5. Website Navigation: Show current page location within site hierarchy

• Read the appropriate reference file based on your needs
• Copy code examples and adapt to your use case
• Refer to API documentation for advanced properties
• Test with different themes (Tailwind, Bootstrap, Fluent, Material)