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)

Accessibility

Table of Contents

• Compliance Standards
• ARIA Attributes
• Keyboard Navigation
• Screen Reader Support
• Best Practices

Compliance Standards

The Syncfusion React Breadcrumb component meets all major accessibility standards and guidelines:

Third-Party Validation:

• Accessibility Checker - Validated ✓
• Axe-core - Validated ✓

ARIA Attributes

The Breadcrumb component automatically applies proper ARIA attributes for accessibility:

aria-label

The aria-label attribute indicates the breadcrumb item text for screen readers:

<a class="e-breadcrumb-item" aria-label="Home">
  <span class="e-icons e-home"></span>
</a>

Automatically Applied: No additional configuration required.

aria-disabled

The aria-disabled attribute indicates when a breadcrumb item is disabled:

<a class="e-breadcrumb-item" aria-disabled="true">
  <span>Current Page</span>
</a>

When Applied:

• Last breadcrumb item (active) when enableActiveItemNavigation={false}
• Disabled items

Keyboard Navigation

The Breadcrumb component supports full keyboard navigation for users who don't use a mouse:

Example: Keyboard Navigation Workflow

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function AccessibleBreadcrumb() {
  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

User Flow: 1. User presses <kbd>Tab</kbd> to focus on breadcrumb 2. User presses <kbd>Tab</kbd> again to move between items 3. User presses <kbd>Enter</kbd> to navigate to item URL 4. Screen reader announces each item's text via aria-label

Screen Reader Support

The Breadcrumb component is fully compatible with screen readers including:

• JAWS (Job Access With Speech)
• NVDA (NonVisual Desktop Access)
• VoiceOver (Apple)
• Narrator (Windows)

How Screen Readers Interact

1. Component Discovery: Screen reader recognizes navigation component 2. Item Announcement: Each breadcrumb item text is announced via aria-label 3. State Indication: Current/active item status is communicated 4. Navigation: Users navigate items using Tab key 5. Action: Users select items using Enter key

Example: Semantic HTML Structure

The component generates accessible HTML:

<nav class="e-breadcrumb" role="navigation" aria-label="Breadcrumb">
  <ol class="e-breadcrumb-list">
    <li class="e-breadcrumb-item">
      <a href="/" aria-label="Home">Home</a>
    </li>
    <li class="e-breadcrumb-item">
      <a href="/products" aria-label="Products">Products</a>
    </li>
    <li class="e-breadcrumb-item" aria-current="page">
      <span aria-label="Electronics">Electronics</span>
    </li>
  </ol>
</nav>

Best Practices

1. Always Provide Text for Icons

When using icons-only breadcrumbs, ensure screen readers can identify items:

// ❌ Poor: Icon-only, no text context
<BreadcrumbItemDirective iconCss="e-icons e-home" />

// ✓ Good: Icon with descriptive text
<BreadcrumbItemDirective iconCss="e-icons e-home" text="Home" />

// ✓ Also Good: Icon with aria-label via beforeItemRender
function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  if (args.element.children[0]) {
    args.element.children[0].title = "Home";
    args.element.children[0].setAttribute("aria-label", "Home");
  }
}

2. Use Meaningful URL Patterns

Breadcrumb URLs should match the site structure:

// ✓ Good: URLs match navigation hierarchy
<BreadcrumbItemDirective text="Products" url="/products" />
<BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
<BreadcrumbItemDirective text="Phones" url="/products/electronics/phones" />

// ❌ Poor: URLs don't reflect structure
<BreadcrumbItemDirective text="Products" url="/p" />
<BreadcrumbItemDirective text="Electronics" url="/e" />

3. Make Navigation Optional

Allow users to disable navigation if needed:

// ✓ Good: enableNavigation prop allows control
<BreadcrumbComponent enableNavigation={true}>
  {/* items */}
</BreadcrumbComponent>

4. Ensure Sufficient Color Contrast

Use colors that meet WCAG AAA standards (at least 7:1 contrast ratio):

/* ✓ Good: High contrast */
.e-breadcrumb .e-breadcrumb-item a {
  color: #0078d4;  /* Dark blue on light background */
}

/* ❌ Poor: Insufficient contrast */
.e-breadcrumb .e-breadcrumb-item a {
  color: #b3d9ff;  /* Light blue on light background */
}

5. Support RTL Languages

The component automatically supports RTL:

<BreadcrumbComponent enableNavigation={false} dir="rtl">
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="الصفحة الرئيسية" url="/" />
    <BreadcrumbItemDirective text="المنتجات" url="/products" />
    <BreadcrumbItemDirective text="الإلكترونيات" url="/products/electronics" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

6. Use Semantic Separators

Avoid ambiguous separators that screen readers might not announce clearly:

// ✓ Good: Clear icon separator
function separatorTemplate(): JSX.Element {
  return (
    <span className="e-icons e-arrow" aria-hidden="true"></span>
  );
}

// Use aria-hidden for decorative icons
<BreadcrumbComponent separatorTemplate={separatorTemplate}>
  {/* items */}
</BreadcrumbComponent>

7. Implement Overflow Accessibly

For overflow modes, ensure hidden items remain accessible:

<BreadcrumbComponent 
  maxItems={3} 
  overflowMode='Menu' 
  enableNavigation={false}
>
  {/* All items remain accessible through menu */}
</BreadcrumbComponent>

8. Test with Real Assistive Technologies

• Test keyboard navigation with Tab, Shift+Tab, Enter keys
• Test with screen readers (NVDA on Windows, VoiceOver on Mac)
• Verify announcements are clear and logical
• Test with browser zoom at 200%
• Test on mobile with touch navigation

Accessibility Testing Tools

Use these tools to validate accessibility:

# Install accessibility checker
npm install accessibility-checker

# Install axe-core
npm install axe-core

# Install WAVE extension browser addon
# Available for Chrome, Firefox, Edge

Example: Fully Accessible Breadcrumb

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function AccessibleBreadcrumb() {
  function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Ensure items have proper ARIA labels
    if (args.element.children[0]) {
      args.element.children[0].setAttribute('role', 'link');
    }
  }

  return (
    <nav aria-label="Breadcrumb">
      <BreadcrumbComponent 
        enableNavigation={true}
        beforeItemRender={beforeItemRenderHandler}
      >
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective iconCss="e-icons e-home" text="Home" url="/" />
          <BreadcrumbItemDirective text="Products" url="/products" />
          <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
          <BreadcrumbItemDirective text="Smartphones" url="/products/electronics/smartphones" />
        </BreadcrumbItemsDirective>
      </BreadcrumbComponent>
    </nav>
  );
}

This implementation ensures:

• Proper semantic HTML with <nav> element
• Clear navigation context with aria-label
• Icon with descriptive text
• Full keyboard navigation support
• Screen reader compatibility
• WCAG 2.2 compliance

API Properties and Events Reference

Table of Contents

• BreadcrumbComponent Properties
• BreadcrumbItem Properties
• Component Events
• Event Arguments
• Overflow Modes

---

BreadcrumbComponent Properties

activeItem

Type: string Default: N/A

Specifies the URL of the active Breadcrumb item. Use this property to programmatically set which breadcrumb item is currently active.

Example:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { useState } from 'react';

export default function App() {
  const [active, setActive] = useState('/products');

  return (
    <BreadcrumbComponent activeItem={active} enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

cssClass

Type: string Default: N/A

Defines one or more CSS classes separated by spaces in the Breadcrumb element. Use this to apply custom styling to the entire breadcrumb container.

Example:

<BreadcrumbComponent cssClass="custom-breadcrumb highlight-nav">
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="Products" url="/products" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

CSS:

.custom-breadcrumb {
  background-color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.highlight-nav .e-breadcrumb-item a {
  color: #0078d4;
  font-weight: 500;
}

---

disabled

Type: boolean Default: false

Enable or disable the entire breadcrumb component. When set to true, the breadcrumb becomes inactive and non-interactive.

Example:

import { useState } from 'react';
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <div>
      <button onClick={() => setIsDisabled(!isDisabled)}>
        Toggle Breadcrumb Disabled
      </button>
      
      <BreadcrumbComponent disabled={isDisabled} enableNavigation={true}>
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective text="Home" url="/" />
          <BreadcrumbItemDirective text="Products" url="/products" />
          <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
        </BreadcrumbItemsDirective>
      </BreadcrumbComponent>
    </div>
  );
}

---

enableNavigation

Type: boolean Default: true

Enable or disable item navigation. When set to false, breadcrumb items are not clickable and navigation is prevented.

Example:

// Display-only breadcrumb (navigation disabled)
<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="Products" url="/products" />
    <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

enableActiveItemNavigation

Type: boolean Default: false

Enable or disable navigation on the active item (last breadcrumb). When set to true, the last breadcrumb item becomes clickable.

Example:

<BreadcrumbComponent enableNavigation={true} enableActiveItemNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="Products" url="/products" />
    <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

enableRtl

Type: boolean Default: false

Enable or disable rendering the component in right-to-left direction. Set to true for RTL languages like Arabic, Hebrew, or Persian.

Example:

<BreadcrumbComponent enableRtl={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="الصفحة الرئيسية" url="/" />
    <BreadcrumbItemDirective text="المنتجات" url="/products" />
    <BreadcrumbItemDirective text="الإلكترونيات" url="/products/electronics" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

items

Type: BreadcrumbItemModel[] Default: N/A

Defines the list of Breadcrumb items. Can be set programmatically to dynamically generate breadcrumbs.

Example:

import { useState } from 'react';
import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';

interface BreadcrumbItemModel {
  text?: string;
  url?: string;
  iconCss?: string;
  disabled?: boolean;
  id?: string;
}

export default function App() {
  const breadcrumbItems: BreadcrumbItemModel[] = [
    { text: 'Home', url: '/' },
    { text: 'Products', url: '/products' },
    { text: 'Electronics', url: '/products/electronics' },
  ];

  return (
    <BreadcrumbComponent items={breadcrumbItems} enableNavigation={true}>
    </BreadcrumbComponent>
  );
}

---

maxItems

Type: number Default: N/A

Specifies the maximum number of breadcrumb items to display before triggering overflow behavior. Additional items are handled according to the overflowMode setting.

Example:

<BreadcrumbComponent maxItems={3} overflowMode="Menu" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Level 1" url="/" />
    <BreadcrumbItemDirective text="Level 2" url="/l2" />
    <BreadcrumbItemDirective text="Level 3" url="/l2/l3" />
    <BreadcrumbItemDirective text="Level 4" url="/l2/l3/l4" />
    <BreadcrumbItemDirective text="Level 5" url="/l2/l3/l4/l5" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

overflowMode

Type: string | BreadcrumbOverflowMode Default: 'Menu'

Specifies the overflow mode when breadcrumb items exceed maxItems. Accepted values:

• Menu: Shows breadcrumbs that fit + remaining items in dropdown
• Collapsed: Shows first and last items with ellipsis for middle items
• Scroll: Shows HTML scrollbar when width exceeds container
• Wrap: Wraps items to multiple lines
• Hidden: Shows fitting items, hides rest (visible on navigation)
• None: Shows all items on single line

Example (Menu Mode - Default):

<BreadcrumbComponent maxItems={3} overflowMode="Menu" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="Folder1" url="/f1" />
    <BreadcrumbItemDirective text="Folder2" url="/f1/f2" />
    <BreadcrumbItemDirective text="Folder3" url="/f1/f2/f3" />
    <BreadcrumbItemDirective text="Folder4" url="/f1/f2/f3/f4" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Example (Collapsed Mode):

<BreadcrumbComponent maxItems={3} overflowMode="Collapsed" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="Folder1" url="/f1" />
    <BreadcrumbItemDirective text="Folder2" url="/f1/f2" />
    <BreadcrumbItemDirective text="Folder3" url="/f1/f2/f3" />
    <BreadcrumbItemDirective text="Folder4" url="/f1/f2/f3/f4" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Example (Scroll Mode):

<BreadcrumbComponent overflowMode="Scroll" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="VeryLongFolderName1" url="/vlfn1" />
    <BreadcrumbItemDirective text="VeryLongFolderName2" url="/vlfn1/vlfn2" />
    <BreadcrumbItemDirective text="VeryLongFolderName3" url="/vlfn1/vlfn2/vlfn3" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

itemTemplate

Type: string | Function Default: N/A

Specifies a custom template for breadcrumb items. Can be a template string or a function returning JSX.

Example (Function Template):

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  const itemTemplate = (data: any): JSX.Element => {
    return (
      <div style={{ padding: '4px 8px', border: '1px solid #ccc', borderRadius: '4px' }}>
        <strong>{data.text}</strong>
      </div>
    );
  };

  return (
    <BreadcrumbComponent itemTemplate={itemTemplate}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

separatorTemplate

Type: string | Function Default: N/A

Specifies a custom template for separators between breadcrumb items.

Example (Function Template with Custom Icon):

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  const separatorTemplate = (): JSX.Element => {
    return (
      <span className="e-icons e-arrow" style={{ margin: '0 8px' }}></span>
    );
  };

  return (
    <BreadcrumbComponent separatorTemplate={separatorTemplate}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

url

Type: string Default: N/A

Defines a URL from which breadcrumb items are automatically generated. If not provided and no items are specified, the current page URL is used.

Example (Static URL):

<BreadcrumbComponent 
  url="url" 
  enableNavigation={false}
>
</BreadcrumbComponent>

This generates breadcrumbs:

• products
• electronics
• phones

Example (Current Page URL):

// If current URL is /admin/users/profile, breadcrumbs are auto-generated
<BreadcrumbComponent enableNavigation={false}></BreadcrumbComponent>

---

BreadcrumbItem Properties

disabled

Type: boolean Default: false

Enable or disable an individual breadcrumb item. When set to true, that specific item becomes inactive.

Example:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" disabled={false} />
        <BreadcrumbItemDirective text="Discontinued" url="/products/discontinued" disabled={true} />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" disabled={false} />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

iconCss

Type: string Default: null

Defines CSS class(es) for the breadcrumb item icon. Supports Syncfusion icons, custom images, or SVG.

Example (Font Icons):

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" text="Home" url="/" />
    <BreadcrumbItemDirective iconCss="e-bicons e-folder" text="Folder" url="/folder" />
    <BreadcrumbItemDirective iconCss="e-bicons e-file" text="File" url="/file" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Example (Image Icon):

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="custom-icon-home" text="Home" url="/" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

CSS:

.custom-icon-home {
  background-image: url('./assets/home.png');
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
}

---

id

Type: string Default: ''

Specifies a unique identifier for the breadcrumb item. Useful for identifying items in event handlers or dynamic updates.

Example:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbClickEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  const handleItemClick = (args: BreadcrumbClickEventArgs) => {
    console.log('Clicked item ID:', args.item.id);
  };

  return (
    <BreadcrumbComponent itemClick={handleItemClick} enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective id="home-item" text="Home" url="/" />
        <BreadcrumbItemDirective id="products-item" text="Products" url="/products" />
        <BreadcrumbItemDirective id="electronics-item" text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

text

Type: string Default: ''

Specifies the display text content of the breadcrumb item.

Example:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" />
    <BreadcrumbItemDirective text="User Profile" url="/profile" />
    <BreadcrumbItemDirective text="Settings" url="/profile/settings" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

url

Type: string Default: ''

Specifies the URL for the breadcrumb item. Used for navigation when enableNavigation is true.

Example (Relative URLs):

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Products" url="./products" />
    <BreadcrumbItemDirective text="Electronics" url="./products/electronics" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Example (Absolute URLs):

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="url" />
    <BreadcrumbItemDirective text="Products" url="url" />
    <BreadcrumbItemDirective text="Electronics" url="url" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

---

Component Events

beforeItemRender

Type: EmitType<BreadcrumbBeforeItemRenderEventArgs>

Triggers before rendering each breadcrumb item. Use this event to customize item rendering or cancel rendering.

Event Arguments:

• cancel (boolean): Set to true to cancel the item rendering
• element (HTMLElement): The DOM element of the breadcrumb item
• item (BreadcrumbItemModel): The breadcrumb item data
• name (string): Event name

Example (Modify Item Classes):

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  const beforeItemRenderHandler = (args: BreadcrumbBeforeItemRenderEventArgs) => {
    // Add custom class to all items
    args.element.classList.add('custom-item-class');
    
    // Add special styling to home item
    if (args.item.text === 'Home') {
      args.element.style.fontWeight = 'bold';
      args.element.classList.add('highlight-home');
    }
  };

  return (
    <BreadcrumbComponent beforeItemRender={beforeItemRenderHandler} enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Example (Cancel Rendering):

const beforeItemRenderHandler = (args: BreadcrumbBeforeItemRenderEventArgs) => {
  // Cancel rendering of disabled items
  if (args.item.disabled) {
    args.cancel = true;
  }
};

Example (Open URL in New Tab):

const beforeItemRenderHandler = (args: BreadcrumbBeforeItemRenderEventArgs) => {
  if (args.element.children[0]) {
    args.element.children[0].target = "_blank";
    args.element.children[0].rel = "noopener noreferrer";
  }
};

---

itemClick

Type: EmitType<BreadcrumbClickEventArgs>

Triggers when a breadcrumb item is clicked.

Event Arguments:

• cancel (boolean): Set to true to cancel the click action
• element (HTMLElement): The DOM element of the clicked item
• event (Event): The click event object
• item (BreadcrumbItemModel): The clicked breadcrumb item data
• name (string): Event name

Example (Handle Item Click):

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbClickEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
    console.log('Clicked item:', args.item.text);
    console.log('Item URL:', args.item.url);
    console.log('Item element:', args.element);
  };

  return (
    <BreadcrumbComponent itemClick={itemClickHandler} enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Example (Cancel Navigation):

const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
  // Prevent navigation for certain items
  if (args.item.text === 'Restricted') {
    args.cancel = true;
    console.log('Navigation cancelled for restricted item');
  }
};

Example (Log Native Click Event):

const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
  console.log('Native event:', args.event);
  console.log('Was ctrl+click:', (args.event as MouseEvent).ctrlKey);
  console.log('Mouse button:', (args.event as MouseEvent).button);
};

---

created

Type: EmitType<Event>

Triggers once the component rendering is completed. Use this to perform initialization tasks or access the component.

Example:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { useRef } from 'react';

export default function App() {
  const breadcrumbRef = useRef<any>(null);

  const handleCreated = () => {
    console.log('Breadcrumb component created successfully');
    
    // Access component instance
    if (breadcrumbRef.current) {
      console.log('Component items:', breadcrumbRef.current.items);
      console.log('Component disabled:', breadcrumbRef.current.disabled);
    }
  };

  return (
    <BreadcrumbComponent 
      ref={breadcrumbRef}
      created={handleCreated}
      enableNavigation={false}
    >
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

---

Event Arguments

BreadcrumbBeforeItemRenderEventArgs

BreadcrumbClickEventArgs

---

Overflow Modes

Complete reference for all overflow modes:

---

Summary Table: All Component Properties

---

Summary Table: All Item Properties

---

All Events Summary

Customization and Templates

Table of Contents

• Overflow Modes
• Item-Level Disabling
• Item Templates
• Separator Templates
• Managing Maximum Items
• Styling and CSS Classes

Overflow Modes

The overflowMode property controls how breadcrumb items are displayed when they exceed available container space. Use maxItems to specify the maximum number of items to display.

Menu Mode (Default)

Menu mode displays the maximum number of items that fit in the container and places remaining items in a dropdown menu:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  function breadcrumbTemplate(): JSX.Element {
    return (
      <span className="e-bicons e-arrow"></span>
    );
  }

  return (
    <BreadcrumbComponent maxItems={3} enableNavigation={false} overflowMode='Menu' separatorTemplate={breadcrumbTemplate}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="../" />
        <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
        <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
        <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
        <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
        <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Use Case: Space-constrained layouts where you need efficient space utilization while maintaining accessibility to all items.

Collapsed Mode

Collapsed mode displays the first and last items while hiding intermediate items behind a collapsed icon (ellipsis). Click the ellipsis to reveal hidden items:

<BreadcrumbComponent maxItems={3} enableNavigation={false} overflowMode='Collapsed' separatorTemplate={breadcrumbTemplate}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
    <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
    <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
    <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: Very narrow containers where showing first and last items is most important.

Scroll Mode

Scroll mode displays a horizontal scrollbar when breadcrumb width exceeds container space:

<BreadcrumbComponent maxItems={3} enableNavigation={false} overflowMode='Scroll' separatorTemplate={breadcrumbTemplate}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
    <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
    <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
    <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: When you want all items visible but need horizontal scrolling.

Wrap Mode

Wrap mode automatically wraps breadcrumb items to multiple lines when total width exceeds container space:

<BreadcrumbComponent maxItems={3} enableNavigation={false} overflowMode='Wrap' separatorTemplate={breadcrumbTemplate}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
    <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
    <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
    <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: Mobile-responsive breadcrumbs that can flow to multiple lines.

---

Item-Level Disabling

Individual breadcrumb items can be disabled independently using the disabled property. Disabled items are non-clickable and visually distinguished from active items.

Disabling Specific Items

Use the disabled property on BreadcrumbItemDirective to disable individual items:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" disabled={false} />
        <BreadcrumbItemDirective text="Products" url="/products" disabled={false} />
        <BreadcrumbItemDirective text="Discontinued" url="/products/discontinued" disabled={true} />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" disabled={false} />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Result: The "Discontinued" item is non-clickable and visually grayed out.

Dynamic Item Disabling

Disable items programmatically based on conditions:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { useState } from 'react';

export default function App() {
  const [userRole, setUserRole] = useState('viewer'); // 'viewer' or 'admin'

  const isAdminOnly = userRole !== 'admin';

  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" disabled={false} />
        <BreadcrumbItemDirective text="Dashboard" url="/dashboard" disabled={false} />
        <BreadcrumbItemDirective text="Admin Panel" url="/admin" disabled={isAdminOnly} />
        <BreadcrumbItemDirective text="Settings" url="/admin/settings" disabled={isAdminOnly} />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Use Case: Role-based navigation where certain breadcrumb paths are only accessible to specific users.

Styling Disabled Items

Disabled items automatically receive the aria-disabled attribute and can be styled with CSS:

/* Style disabled breadcrumb items */
.e-breadcrumb-item[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  color: #999;
}

.e-breadcrumb-item[aria-disabled="true"] a {
  pointer-events: none;
  text-decoration: line-through;
}

Combining with beforeItemRender

Use beforeItemRender event to add custom styling to disabled items:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  const beforeItemRenderHandler = (args: BreadcrumbBeforeItemRenderEventArgs) => {
    if (args.item.disabled) {
      args.element.classList.add('disabled-breadcrumb');
      args.element.style.opacity = '0.5';
      args.element.style.backgroundColor = '#f0f0f0';
    }
  };

  return (
    <BreadcrumbComponent 
      enableNavigation={true}
      beforeItemRender={beforeItemRenderHandler}
    >
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" disabled={false} />
        <BreadcrumbItemDirective text="Premium Feature" url="/premium" disabled={true} />
        <BreadcrumbItemDirective text="Settings" url="/settings" disabled={false} />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Hidden Mode

Hidden mode displays maximum items that fit and completely hides remaining items. Hidden items become visible when navigating to previous levels:

<BreadcrumbComponent maxItems={3} enableNavigation={false} overflowMode='Hidden' separatorTemplate={breadcrumbTemplate}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
    <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
    <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
    <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: Deeply nested navigation where older items are hidden until you navigate back.

None Mode

None mode displays all items on a single line without any overflow handling:

<BreadcrumbComponent enableNavigation={false} overflowMode='None'>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: Containers with sufficient space or when maxItems is not set.

Item Templates

Customize individual breadcrumb items using the itemTemplate property:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';

export default function App() {
  function chipTemplate(data: any): JSX.Element {
    return (
      <ChipListComponent>
        <ChipsDirective>
          <ChipDirective text={data.text}></ChipDirective>
        </ChipsDirective>
      </ChipListComponent>
    );
  }

  return (
    <BreadcrumbComponent cssClass="e-breadcrumb-chips" itemTemplate={chipTemplate}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Cart" />
        <BreadcrumbItemDirective text="Billing" />
        <BreadcrumbItemDirective text="Shipping" />
        <BreadcrumbItemDirective text="Payment" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Use Case: Shopping cart navigation steps with chip-style UI.

Conditional Item Templates

Apply custom styling to specific items based on conditions:

export default function App() {
  function specificItemTemplate(data: any): JSX.Element {
    return (
      <div>
        {data.text === "Breadcrumb" ? (
          <span>
            <span className="e-searchfor-text">
              <span style={{ marginRight: "5px" }}>Search for:</span>
              <a className="e-breadcrumb-text" href={data.url} onClick={() => { return false }}>
                {data.text}
              </a>
            </span>
          </span>
        ) : (
          <a className="e-breadcrumb-text" href={data.url} onClick={() => { return false }}>
            {data.text}
          </a>
        )}
      </div>
    );
  }

  return (
    <BreadcrumbComponent 
      itemTemplate={specificItemTemplate} 
      cssClass="e-specific-item-template"
      enableNavigation={false}
    >
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="url" />
        <BreadcrumbItemDirective text="Components" url="url" />
        <BreadcrumbItemDirective text="Navigations" url="url" />
        <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Use Case: Highlight specific breadcrumb items with custom styling or labels.

Separator Templates

Customize the separators between breadcrumb items using the separatorTemplate property:

export default function App() {
  function arrowSeparatorTemplate(): JSX.Element {
    return (
      <span className="e-icons e-arrow"></span>
    );
  }

  return (
    <BreadcrumbComponent separatorTemplate={arrowSeparatorTemplate}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Cart" />
        <BreadcrumbItemDirective text="Billing" />
        <BreadcrumbItemDirective text="Shipping" />
        <BreadcrumbItemDirective text="Payment" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Available Separator Icons:

• e-icons e-arrow - Arrow separator
• e-icons e-chevron-right - Chevron separator
• e-icons e-slash - Slash separator
• Custom HTML or JSX elements

Use Case: Create visually distinctive navigation paths with custom separators.

Managing Maximum Items

The maxItems property controls the maximum number of breadcrumb items displayed before overflow behavior is triggered:

// Display maximum 5 items before showing overflow
<BreadcrumbComponent maxItems={5} overflowMode='Menu' enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Level 1" />
    <BreadcrumbItemDirective text="Level 2" />
    <BreadcrumbItemDirective text="Level 3" />
    <BreadcrumbItemDirective text="Level 4" />
    <BreadcrumbItemDirective text="Level 5" />
    <BreadcrumbItemDirective text="Level 6" />
    <BreadcrumbItemDirective text="Level 7" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Common Settings:

• maxItems={2} - Very compact, ideal for mobile
• maxItems={3} - Compact, common for tablets
• maxItems={5} - Default, common for desktop
• maxItems={10} - Spacious, shows most items

Styling and CSS Classes

Add custom CSS classes using the cssClass property:

export default function App() {
  return (
    <BreadcrumbComponent 
      cssClass="custom-breadcrumb"
      enableNavigation={false}
    >
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" />
        <BreadcrumbItemDirective text="Products" />
        <BreadcrumbItemDirective text="Electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

In your CSS file:

.custom-breadcrumb {
  background-color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 4px;
}

.custom-breadcrumb .e-breadcrumb-item {
  font-size: 14px;
  color: #333;
}

.custom-breadcrumb .e-breadcrumb-item a {
  color: #0078d4;
  text-decoration: none;
}

.custom-breadcrumb .e-breadcrumb-item a:hover {
  text-decoration: underline;
}

Common Styling:

• Background color and padding
• Font size and weight
• Link colors and hover states
• Separator styling
• Active item highlighting

Getting Started with Breadcrumb Component

Table of Contents

• Dependencies
• Development Environment Setup
• Adding Syncfusion Packages
• Adding Stylesheets
• Creating Your First Breadcrumb
• Adding Items
• Enabling and Disabling Navigation

Dependencies

The Syncfusion Breadcrumb component requires the following dependencies:

@syncfusion/ej2-react-navigations
├── @syncfusion/ej2-react-base
├── @syncfusion/ej2-navigations
│   ├── @syncfusion/ej2-base
│   ├── @syncfusion/ej2-data
│   ├── @syncfusion/ej2-inputs
│   ├── @syncfusion/ej2-lists
│   └── @syncfusion/ej2-popups
│       └── @syncfusion/ej2-buttons

These are automatically installed when you install @syncfusion/ej2-react-navigations.

Development Environment Setup

Option 1: Using Vite (Recommended)

Vite provides faster development, smaller bundle sizes, and optimized production builds.

Create a new React application with TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

Create a new React application with JavaScript:

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Benefits of Vite:

• Faster hot module replacement (HMR)
• Smaller production bundles
• Optimized build process
• Better development experience

Option 2: Using Create React App

If you prefer Create React App instead of Vite, use:

npx create-react-app my-app
cd my-app
npm start

Adding Syncfusion Packages

Install the Breadcrumb component package:

npm install @syncfusion/ej2-react-navigations --save

This command installs all required dependencies for the Breadcrumb component.

Adding Stylesheets

Add the Breadcrumb component stylesheets to your App.css or App.tsx file:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";

Available Themes:

• tailwind3.css - Tailwind CSS theme (modern, clean)
• bootstrap5.css - Bootstrap 5 theme (classic)
• fluent2.css - Microsoft Fluent 2 theme (professional)
• material3.css - Material Design 3 theme (material design)

Choose the theme that matches your application's design system.

Creating Your First Breadcrumb

Create a basic Breadcrumb component with no items:

import { BreadcrumbComponent } from '@syncfusion/ej2-react-navigations';
import './App.css';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={false}>
    </BreadcrumbComponent>
  );
}

Key Props:

• enableNavigation={false} - Disables navigation, breadcrumb is display-only

Adding Items

Add breadcrumb items using BreadcrumbItemsDirective and BreadcrumbItemDirective:

import { 
  BreadcrumbComponent, 
  BreadcrumbItemDirective, 
  BreadcrumbItemsDirective 
} from '@syncfusion/ej2-react-navigations';
import './App.css';

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

Item Properties:

• text - Display text for the breadcrumb item
• url - Navigation URL (relative or absolute)
• iconCss - CSS class for icon (e.g., "e-icons e-home")

Enabling and Disabling Navigation

The Breadcrumb component supports navigation control through the enableNavigation property.

Navigation Disabled (Display Only)

When enableNavigation={false}, breadcrumb items are not clickable:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" url="url" />
    <BreadcrumbItemDirective text="Components" url="url" />
    <BreadcrumbItemDirective text="Navigations" url="url" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Navigation Enabled (Clickable Items)

When enableNavigation={true}, breadcrumb items become clickable:

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" url="url" />
    <BreadcrumbItemDirective text="Components" url="url" />
    <BreadcrumbItemDirective text="Navigations" url="url" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Note: The last breadcrumb item (active/current page) is not clickable by default, even when enableNavigation={true}. To make it clickable, use enableActiveItemNavigation={true}.

Running Your Application

After setup, run your development server:

npm run dev

Your Breadcrumb component will be available at url (Vite) or url (Create React App).

TypeScript Support

Full TypeScript support is available. Import types for better IDE support:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs, BreadcrumbClickEventArgs } from '@syncfusion/ej2-navigations';

This enables type checking and autocomplete for all props and events.

Icon Integration and Data Binding

Table of Contents

• Loading Icons
• Icon Types
• Icon Positioning
• Data Binding Methods
• URL-Based Item Generation

Loading Icons

The iconCss property enables adding icons to breadcrumb items. Icons provide visual context and enhance navigation understanding.

Font Icons

Use Syncfusion font icons by setting the iconCss property with the e-icons class and icon name:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

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

Common Syncfusion Icons:

• e-icons e-home - Home icon
• e-bicons e-folder - Folder icon
• e-bicons e-file - File icon
• e-bicons e-download - Download icon
• e-bicons e-settings - Settings icon

Default Position: Icons appear to the left of the item text.

Image Icons

Add images to breadcrumb items using the iconCss property with an image class:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

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

Define Image Classes in CSS:

.e-image-home {
  background-image: url('./assets/home.png');
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
}

SVG Images

Add SVG graphics to breadcrumb items:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

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

Define SVG Classes in CSS:

.e-svg-home::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="url" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
  margin-right: 8px;
}

Icon Types

The Breadcrumb component supports multiple icon classification systems:

File System Icons (e-bicons)

File-related icons for file system navigation:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder" />
    <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder" />
    <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Utility Icons (e-icons)

General-purpose icons for various navigation scenarios:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" />
    <BreadcrumbItemDirective iconCss="e-icons e-settings" text="Settings" />
    <BreadcrumbItemDirective iconCss="e-icons e-bell" text="Notifications" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Icon Positioning

Icons can be positioned to the left (default) or right of item text.

Icon on Left (Default)

Icons are positioned to the left of the item text by default:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder" />
    <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder" />
    <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Icon on Right

Add the e-icon-right class to position icons to the right using the beforeItemRender event:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    if (args.element) {
      args.element.classList.add('e-icon-right');
    }
  }

  return (
    <div>
      <div><b>Icon Position - Left (Default)</b></div>
      <BreadcrumbComponent enableNavigation={false}>
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder" />
          <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder" />
          <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file" />
        </BreadcrumbItemsDirective>
      </BreadcrumbComponent>

      <br />
      <br />

      <div><b>Icon Position - Right</b></div>
      <BreadcrumbComponent beforeItemRender={beforeItemRenderHandler} enableNavigation={false}>
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder" />
          <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder" />
          <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file" />
        </BreadcrumbItemsDirective>
      </BreadcrumbComponent>
    </div>
  );
}

Icon Only

Display only icons without text by omitting the text property:

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

Use Case: Compact breadcrumbs where icons are self-explanatory.

Icon for First Item Only

Show icon only on the first item:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" url="url" />
    <BreadcrumbItemDirective text="Components" url="url" />
    <BreadcrumbItemDirective text="Navigations" url="url" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Data Binding Methods

Items as Tag Directives (Recommended)

Use BreadcrumbItemsDirective and BreadcrumbItemDirective tags to declaratively bind items:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" url="url" />
    <BreadcrumbItemDirective text="Components" url="url" />
    <BreadcrumbItemDirective text="Navigations" url="url" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Advantages:

• Declarative and readable
• TypeScript support
• Full IDE autocomplete

URL-Based Item Generation

The Breadcrumb component can automatically generate items from URL paths.

Current URL

When no items are provided, the breadcrumb generates items from the current page URL:

<BreadcrumbComponent enableNavigation={false}></BreadcrumbComponent>

Example: If the URL is /products/electronics/smartphones, the breadcrumb automatically generates:

• "products"
• "electronics"
• "smartphones"

Note: This approach is useful when breadcrumb items match the URL structure.

Static URL

Generate breadcrumb items from a provided URL using the url property:

<BreadcrumbComponent 
  enableNavigation={false} 
  url="url"
>
</BreadcrumbComponent>

This generates breadcrumb items from the URL path segments.

Customize Generated Items

Use the beforeItemRender event to customize text of auto-generated breadcrumb items:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    if (args.item.text === 'bind-to-location') {
      args.item.text = 'location';
    }
  }

  return (
    <BreadcrumbComponent 
      enableActiveItemNavigation={true} 
      url="url"
      beforeItemRender={beforeItemRenderHandler}
    >
    </BreadcrumbComponent>
  );
}

Use Case: Format auto-generated items for better readability (e.g., convert bind-to-location to location).

Combining Icons and Data Binding

Combine static items with dynamic icons:

export default function App() {
  interface BreadcrumbItem {
    text: string;
    url: string;
    iconCss?: string;
  }

  const items: BreadcrumbItem[] = [
    { text: 'Home', url: '/', iconCss: 'e-icons e-home' },
    { text: 'Products', url: '/products' },
    { text: 'Electronics', url: '/products/electronics' },
  ];

  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        {items.map((item, index) => (
          <BreadcrumbItemDirective
            key={index}
            text={item.text}
            url={item.url}
            iconCss={item.iconCss}
          />
        ))}
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

This pattern allows dynamic breadcrumb generation with per-item icon configuration.

Navigation and Routing

Table of Contents

• Enable/Disable Navigation
• URL Types
• Enable Active Item Navigation
• Handling Item Clicks
• Open URL in New Tab
• Handle beforeItemRender Event
• Advanced Routing Integration

Enable/Disable Navigation

The enableNavigation property controls whether breadcrumb items are clickable and navigate to their URLs.

Navigation Disabled (Default Behavior)

When enableNavigation={false}, breadcrumb items are not clickable:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

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

Use Case: Display-only breadcrumbs for status pages or reporting.

Navigation Enabled

When enableNavigation={true}, breadcrumb items become clickable and navigate to their URLs:

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" url="url" />
    <BreadcrumbItemDirective text="Components" url="url" />
    <BreadcrumbItemDirective text="Navigations" url="url" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Important: The last breadcrumb item (active/current page) remains non-clickable by default. Use enableActiveItemNavigation={true} to make it clickable.

URL Types

The Breadcrumb component supports both relative and absolute URLs.

Relative URLs

Relative URLs contain only the path segment:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb" />
    <BreadcrumbItemDirective text="Default" url="./breadcrumb/default-functionalities" />
    <BreadcrumbItemDirective text="Icons" url="./breadcrumb/icons" />
    <BreadcrumbItemDirective text="Navigation" url="./breadcrumb/navigation" />
    <BreadcrumbItemDirective text="Overflow" url="./breadcrumb/overflow" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

When to use: Internal navigation within your application.

Absolute URLs

Absolute URLs contain the complete path with protocol and domain:

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="url" />
    <BreadcrumbItemDirective text="Getting Started" url="url" />
    <BreadcrumbItemDirective text="Icons" url="url" />
    <BreadcrumbItemDirective text="Navigation" url="url" />
    <BreadcrumbItemDirective text="Overflow" url="url" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

When to use: External links or cross-domain navigation.

---

Handling Item Clicks

Use the itemClick event to handle breadcrumb item clicks and execute custom logic before or instead of navigation.

Basic Item Click Handler

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbClickEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
    console.log('Clicked item:', args.item.text);
    console.log('Item URL:', args.item.url);
    console.log('Item ID:', args.item.id);
    console.log('Element:', args.element);
  };

  return (
    <BreadcrumbComponent itemClick={itemClickHandler} enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective id="home" text="Home" url="/" />
        <BreadcrumbItemDirective id="products" text="Products" url="/products" />
        <BreadcrumbItemDirective id="electronics" text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Cancel Navigation on Item Click

Prevent navigation for certain items or conditions:

const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
  // Prevent navigation for restricted items
  if (args.item.text === 'Admin Only' && !userIsAdmin) {
    args.cancel = true;
    alert('You do not have access to this section');
  }
  
  // Prevent default navigation and use custom logic
  if (args.item.id === 'special-action') {
    args.cancel = true;
    // Perform custom navigation or action
    customNavigationLogic(args.item.url);
  }
};

Detect Modifier Keys

Check for Ctrl+Click, Shift+Click, etc.:

const itemClickHandler = (args: BreadcrumbClickEventArgs) => {
  const mouseEvent = args.event as MouseEvent;
  
  if (mouseEvent.ctrlKey) {
    console.log('Ctrl+Click detected');
    // Open in new window
    window.open(args.item.url);
    args.cancel = true; // Prevent default navigation
  }
  
  if (mouseEvent.shiftKey) {
    console.log('Shift+Click detected');
  }
  
  if (mouseEvent.metaKey) {
    console.log('Meta/Cmd+Click detected (Mac)');
  }
};

---

Enable Active Item Navigation

By default, the last breadcrumb item (active item representing the current page) is not clickable. Set enableActiveItemNavigation={true} to make it clickable:

<BreadcrumbComponent enableNavigation={true} enableActiveItemNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="url" />
    <BreadcrumbItemDirective text="Getting Started" url="url" />
    <BreadcrumbItemDirective text="Icons" url="url" />
    <BreadcrumbItemDirective text="Navigation" url="url" />
    <BreadcrumbItemDirective text="Overflow" url="url" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

Use Case: Allow users to refresh or re-navigate to the current page.

Open URL in New Tab

Use the beforeItemRender event to set the target property to "_blank" for opening URLs in new tabs:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    if (args.element.children[0]) {
      args.element.children[0].target = "_blank";
    }
  }

  return (
    <BreadcrumbComponent enableActiveItemNavigation={true} beforeItemRender={beforeItemRenderHandler}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="url" />
        <BreadcrumbItemDirective text="Getting Started" url="url" />
        <BreadcrumbItemDirective text="Icons" url="url" />
        <BreadcrumbItemDirective text="Navigation" url="url" />
        <BreadcrumbItemDirective text="Overflow" url="url" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

How it works:

• The beforeItemRender event fires before each breadcrumb item is rendered
• Access the DOM element via args.element
• Set target="_blank" on the anchor element to open URLs in a new tab

Tip: You can add other modifications like rel="noopener noreferrer" for security:

function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  if (args.element.children[0]) {
    args.element.children[0].target = "_blank";
    args.element.children[0].rel = "noopener noreferrer";
  }
}

Handle beforeItemRender Event

The beforeItemRender event fires before each breadcrumb item is rendered, allowing you to modify items dynamically:

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

export default function App() {
  function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Access the breadcrumb item
    console.log('Item text:', args.item.text);
    
    // Access the DOM element
    console.log('Element:', args.element);
    
    // Add custom classes or attributes
    args.element.classList.add('custom-breadcrumb-item');
    
    // Modify styling
    if (args.item.text === 'Home') {
      args.element.style.fontWeight = 'bold';
    }
  }

  return (
    <BreadcrumbComponent beforeItemRender={beforeItemRenderHandler}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Common Use Cases:

• Add CSS classes conditionally
• Modify styling based on item properties
• Change URLs dynamically
• Add accessibility attributes
• Set target="_blank" for external links

Advanced Routing Integration

For single-page applications using routing libraries like React Router:

import { useNavigate } from 'react-router-dom';
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';

export default function Breadcrumb() {
  const navigate = useNavigate();

  const handleClick = (url: string) => {
    navigate(url);
  };

  return (
    <BreadcrumbComponent enableNavigation={true}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective text="Home" url="/" />
        <BreadcrumbItemDirective text="Products" url="/products" />
        <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

Best Practice: Set enableNavigation={true} and let the browser handle navigation with standard URLs. React Router will automatically intercept navigation for single-page app routing.