Syncfusion React Breadcrumb

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

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

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

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

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

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

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

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:

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:

<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:

<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:

<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:

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

Disable specific items based on conditions:

<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

Item-Level Properties

Events

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

Next Steps:

• 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)