Syncfusion Angular Breadcrumb

Implementing Syncfusion Angular Breadcrumb

The Breadcrumb component provides a navigation aid that displays the user's current location within a hierarchy of pages or sections. It offers clickable links to parent levels and visually represents the breadcrumb trail.

When to Use This Skill

Use this skill when you need to:

• Implement breadcrumb navigation trails in Angular applications
• Display user location within page hierarchies
• Enable navigation to parent sections
• Add icons and visual enhancements to breadcrumb items
• Handle overflow with multiple display modes
• Customize breadcrumb appearance with templates
• Configure data binding for breadcrumb items

Component Overview

The Syncfusion Angular Breadcrumb component (ejs-breadcrumb) is part of the @syncfusion/ej2-angular-navigations package. It displays a series of links in hierarchical order, with each item representing a navigation level. The component supports:

• Multiple data binding approaches: items as directives, URL-based, or static configuration
• Icon support: font icons, images, and SVG graphics
• Navigation control: enable/disable, open in new tabs, last-item navigation
• Overflow handling: 6 different modes for space-constrained layouts
• Template customization: item templates and separator customization
• Event handling: beforeItemRender for dynamic customization

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Module imports and enableRipple configuration
• Basic breadcrumb component rendering
• Adding items with e-breadcrumb-items directive
• Enabling and disabling navigation functionality
• CSS imports and theme application

Data Binding

📄 Read: references/data-binding.md

• Items as tag directives with properties
• Generating items from current URL
• Static URL configuration for breadcrumb items
• Using the url property to bind navigation paths
• beforeItemRender event for customization
• Customizing generated item text

Icons and Visual Enhancements

📄 Read: references/icons-and-visuals.md

• Adding font icons using iconCss property
• Using image icons in breadcrumb items
• SVG icon implementation
• Icon positioning (left and right alignment)
• Icon-only items without text
• First-item-only icon patterns

Navigation Configuration

📄 Read: references/navigations.md

• Relative URL configuration
• Absolute URL configuration
• enableNavigation property control
• enableActiveItemNavigation for last-item navigation
• Opening breadcrumb items in new tabs or pages
• Link target and navigation behavior

API Reference

📄 Read: references/api-reference.md

• All properties, methods, and events for breadcrumb
• BreadcrumbItemModel details
• BreadcrumbBeforeItemRenderEventArgs and BreadcrumbClickEventArgs
• Component methods like destroy

Overflow Handling

📄 Read: references/overflow-handling.md

• maxItems and overflowMode properties
• Collapsed mode for compact display
• Menu mode with dropdown submenus
• Wrap mode for multi-line layouts
• Scroll mode with horizontal scrollbar
• Hidden mode with dynamic visibility
• None mode for no overflow handling

Templates and Customization

📄 Read: references/templates-customization.md

• itemTemplate for custom item rendering
• separatorTemplate for custom separators
• Custom separator icons and styling
• Conditional item templates
• Component integration (e.g., ChipList)
• Advanced CSS customization

Quick Start Example

Basic breadcrumb with items and navigation:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="true">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Products" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Electronics" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Laptops" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Common Patterns

Disable Navigation

Set enableNavigation="false" to prevent clicking items:

<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

Add Icons to Items

Use iconCss with Syncfusion icon classes:

<e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>

Handle Overflow

Use maxItems and overflowMode for space-constrained layouts:

<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">

Enable Last Item Navigation

Allow clicking the active/last item:

<ejs-breadcrumb [enableActiveItemNavigation]="true">

Customize Separators

Replace default separators with custom icons:

<ng-template #separatorTemplate>
  <span class='e-bicons e-arrow'></span>
</ng-template>

Key Properties

Common Use Cases

1. E-commerce Navigation: Show product hierarchy (Home > Categories > Subcategory > Product) 2. File System Browser: Display folder path with accessible parent folders 3. Documentation Site: Breadcrumb trail through documentation hierarchy 4. Blog Navigation: Show post category and current article location 5. Admin Dashboard: Display section and subsection location 6. Multi-step Forms: Show form progress and completion steps

---

Next Steps:

• Read getting-started.md to set up the breadcrumb component
• Choose a data binding approach from data-binding.md
• Enhance with icons from icons-and-visuals.md
• Configure navigation from navigations.md
• Handle overflow with overflow-handling.md
• Customize templates from templates-customization.md

Complete API Reference for Angular Breadcrumb

Table of Contents

• Component Properties
• Item Model Properties
• Component Methods
• Component Events
• Event Arguments
• Usage Examples

---

Component Properties

The Breadcrumb component supports the following properties for configuration and control:

activeItem

Type: string Default: ''

Specifies the URL of the active/current breadcrumb item. This property determines which item is marked as the active item in the breadcrumb trail.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb [activeItem]="currentUrl">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
      <e-breadcrumb-item text="Electronics" url="/products/electronics"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`
})
export class AppComponent {
  currentUrl: string = '/products/electronics';
}

cssClass

Type: string Default: ''

Defines one or more CSS classes separated by spaces to be applied to the breadcrumb component for custom styling and theming.

<ejs-breadcrumb cssClass="custom-breadcrumb dark-theme">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

Associated CSS:

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

.custom-breadcrumb.dark-theme {
  background-color: #2d2d2d;
  color: #ffffff;
}

disabled

Type: boolean Default: false

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

<ejs-breadcrumb [disabled]="isDisabled">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

CSS for disabled state styling:

.e-breadcrumb.e-disabled {
  opacity: 0.6;
  pointer-events: none;
  color: #999;
}

enableActiveItemNavigation

Type: boolean Default: false

Enable or disable navigation for the active (last) breadcrumb item. When true, clicking the active item will trigger navigation to its URL.

<ejs-breadcrumb [enableActiveItemNavigation]="true">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
    <e-breadcrumb-item text="Current" url="/products/current"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

When enabled, clicking "Current" (the active item) navigates to /products/current.

enableNavigation

Type: boolean Default: true

Enable or disable click-based navigation for all breadcrumb items. When false, breadcrumb items are displayed but don't navigate.

// Navigation disabled - breadcrumb is display-only
<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

// Navigation enabled - items are clickable
<ejs-breadcrumb [enableNavigation]="true">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

enablePersistence

Type: boolean Default: false

Enable or disable persisting component state (like active item and scroll position) between page reloads using browser storage.

import { Component } from '@angular/core';
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb [enablePersistence]="true" id="breadcrumb">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Settings" url="/settings"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`
})
export class AppComponent {}

When enabled with id="breadcrumb", the component saves state to localStorage as breadcrumb-state and restores it on page reload.

enableRtl

Type: boolean Default: false

Enable or disable right-to-left (RTL) layout rendering. Useful for languages like Arabic, Hebrew, and Urdu.

// RTL breadcrumb for Arabic interface
<ejs-breadcrumb [enableRtl]="true">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="الرئيسية" url="/home"></e-breadcrumb-item>
    <e-breadcrumb-item text="المنتجات" url="/products"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

Associated CSS for RTL:

.e-breadcrumb[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.e-breadcrumb[dir="rtl"] .e-breadcrumb-item {
  margin-left: 0;
  margin-right: 8px;
}

itemTemplate

Type: any (Template) Default: null

Specifies the template for rendering custom item content. The template receives the item data as context.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  imports: [BreadcrumbModule, CommonModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb>
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Products"></e-breadcrumb-item>
    </e-breadcrumb-items>
    <ng-template #itemTemplate let-data="">
      <div class="custom-item">
        <span class="item-text">{{data.text}}</span>
        <span class="item-badge" *ngIf="data.badge">{{data.badge}}</span>
      </div>
    </ng-template>
  </ejs-breadcrumb>`
})
export class AppComponent {}

.custom-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-badge {
  background-color: #f44336;
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
}

items

Type: BreadcrumbItemModel[] Default: []

Defines the array of breadcrumb items to display. Use this for programmatic item management instead of directives.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { BreadcrumbItemModel } from '@syncfusion/ej2-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb [items]="breadcrumbItems"></ejs-breadcrumb>`
})
export class AppComponent {
  breadcrumbItems: BreadcrumbItemModel[] = [
    { text: 'Home', url: '/home', id: 'home' },
    { text: 'Products', url: '/products', id: 'products' },
    { text: 'Electronics', url: '/products/electronics', id: 'electronics' },
    { text: 'Laptops', url: '/products/electronics/laptops', id: 'laptops', disabled: false }
  ];
}

maxItems

Type: number Default: -1 (no limit)

Specifies the maximum number of items to display before applying the overflow behavior. When the item count exceeds this value, the overflowMode property determines how extra items are handled.

<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
    <e-breadcrumb-item text="Electronics" url="/products/electronics"></e-breadcrumb-item>
    <e-breadcrumb-item text="Laptops" url="/products/electronics/laptops"></e-breadcrumb-item>
    <e-breadcrumb-item text="Gaming" url="/products/electronics/laptops/gaming"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

With maxItems="3": Shows first 3 items + remaining items in a dropdown menu.

overflowMode

Type: string | BreadcrumbOverflowMode Default: BreadcrumbOverflowMode.Menu

Specifies how to handle breadcrumb items when they exceed available space. Valid values:

• Menu: Shows fitting items + dropdown for remainder
• Collapsed: Shows first and last + ellipsis for middle items
• Wrap: Items wrap to multiple lines
• Scroll: Horizontal scrollbar for single-line overflow
• Hidden: Shows fitting items only, hidden items appear on navigation
• None: All items on single line without overflow handling

// Menu overflow mode (default)
<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">...</ejs-breadcrumb>

// Collapsed mode
<ejs-breadcrumb [maxItems]="3" overflowMode="Collapsed">...</ejs-breadcrumb>

// Wrap mode
<ejs-breadcrumb overflowMode="Wrap">...</ejs-breadcrumb>

// Scroll mode
<ejs-breadcrumb [maxItems]="4" overflowMode="Scroll">...</ejs-breadcrumb>

// Hidden mode
<ejs-breadcrumb [maxItems]="3" overflowMode="Hidden">...</ejs-breadcrumb>

// None mode
<ejs-breadcrumb overflowMode="None">...</ejs-breadcrumb>

separatorTemplate

Type: any (Template) Default: '/'

Specifies the template for rendering custom separators between breadcrumb items. Can be text, HTML, or Angular template.

// Simple text separator
<ejs-breadcrumb separatorTemplate="→">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

// Custom icon separator
<ejs-breadcrumb>
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products"></e-breadcrumb-item>
  </e-breadcrumb-items>
  <ng-template #separatorTemplate>
    <span class="e-bicons e-arrow"></span>
  </ng-template>
</ejs-breadcrumb>

url

Type: string Default: ''

Specifies a URL whose path will be parsed to automatically generate breadcrumb items. The URL is segmented and each segment becomes a breadcrumb item.

// Generate items from URL path
<ejs-breadcrumb url="url">
</ejs-breadcrumb>

// Results in items: products > electronics > laptops

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb [url]="navigationUrl"></ejs-breadcrumb>`
})
export class AppComponent {
  navigationUrl: string = 'url';
}

---

Item Model Properties

Individual breadcrumb items use the BreadcrumbItemModel interface with these properties:

disabled

Type: boolean Default: false

Enable or disable a specific breadcrumb item. Disabled items appear visually distinct and cannot be clicked.

const items: BreadcrumbItemModel[] = [
  { text: 'Home', url: '/home', disabled: false },
  { text: 'Products', url: '/products', disabled: false },
  { text: 'Archived', url: '/archived', disabled: true }  // Disabled item
];

<ejs-breadcrumb [items]="items"></ejs-breadcrumb>

iconCss

Type: string Default: ''

Specifies CSS classes for icons to display with the item. Use Syncfusion icon classes or custom CSS.

const items: BreadcrumbItemModel[] = [
  { text: 'Home', url: '/home', iconCss: 'e-icons e-home' },
  { text: 'Documents', url: '/docs', iconCss: 'e-bicons e-folder' },
  { text: 'File.txt', url: '/file', iconCss: 'e-bicons e-file' }
];

<ejs-breadcrumb [items]="items"></ejs-breadcrumb>

id

Type: string Default: ''

Specifies a unique identifier for the breadcrumb item. Use for item tracking, state management, and programmatic access.

const items: BreadcrumbItemModel[] = [
  { id: 'item-1', text: 'Home', url: '/home' },
  { id: 'item-2', text: 'Products', url: '/products' },
  { id: 'item-3', text: 'Electronics', url: '/products/electronics' }
];

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb [items]="items" (itemClick)="onItemClick($event)"></ejs-breadcrumb>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = items;

  onItemClick(args: BreadcrumbClickEventArgs): void {
    console.log('Clicked item ID:', args.item.id);
    // Route based on item ID
    if (args.item.id === 'item-2') {
      // Navigate to products
    }
  }
}

text

Type: string Default: ''

Specifies the display text for the breadcrumb item.

const items: BreadcrumbItemModel[] = [
  { text: 'Home', url: '/home' },
  { text: 'User Profile', url: '/profile' },
  { text: 'Settings', url: '/settings' }
];

<ejs-breadcrumb [items]="items"></ejs-breadcrumb>

url

Type: string Default: ''

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

const items: BreadcrumbItemModel[] = [
  { text: 'Home', url: '/home' },
  { text: 'Products', url: '/products' },
  { text: 'Electronics', url: '/products/electronics' }
];

<ejs-breadcrumb [items]="items" [enableNavigation]="true"></ejs-breadcrumb>

---

Component Methods

destroy

Returns: void

Destroys the breadcrumb component and cleans up resources. Call this when removing the component from the DOM.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { BreadcrumbComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb #breadcrumb [items]="items"></ejs-breadcrumb>
    <button (click)="destroyBreadcrumb()">Destroy</button>`
})
export class AppComponent {
  @ViewChild('breadcrumb') breadcrumb!: BreadcrumbComponent;
  
  items = [
    { text: 'Home', url: '/home' },
    { text: 'Products', url: '/products' }
  ];

  destroyBreadcrumb(): void {
    this.breadcrumb.destroy();
    // Component is now cleaned up and no longer functional
  }
}

---

Component Events

The breadcrumb component emits the following events:

beforeItemRender

Type: EmitType<BreadcrumbBeforeItemRenderEventArgs>

Triggered before each breadcrumb item is rendered. Use this to customize item appearance and properties before display.

Arguments: BreadcrumbBeforeItemRenderEventArgs

• cancel: boolean - Set to true to prevent item rendering
• element: HTMLElement - The DOM element being rendered
• item: BreadcrumbItemModel - The item being rendered
• name: string - Event name ('beforeItemRender')

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb (beforeItemRender)="onBeforeItemRender($event)">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`
})
export class AppComponent {
  onBeforeItemRender(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Add custom CSS class to specific items
    if (args.item.text === 'Products') {
      args.element.classList.add('highlight-item');
    }
    
    // Prevent rendering of certain items
    if (args.item.text === 'Admin') {
      args.cancel = true;
    }
  }
}

created

Type: EmitType<Event>

Triggered once the breadcrumb component rendering is completed. Use for initialization or post-render setup.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { BreadcrumbComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb #breadcrumb (created)="onComponentCreated()">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>
  <div *ngIf="isReady">Breadcrumb Ready</div>`
})
export class AppComponent {
  @ViewChild('breadcrumb') breadcrumb!: BreadcrumbComponent;
  isReady: boolean = false;

  onComponentCreated(): void {
    console.log('Breadcrumb component created and rendered');
    this.isReady = true;
    
    // Perform post-render operations
    this.breadcrumb.element.focus();
  }
}

itemClick

Type: EmitType<BreadcrumbClickEventArgs>

Triggered when a breadcrumb item is clicked. Use to handle custom navigation or perform actions before navigation.

Arguments: BreadcrumbClickEventArgs

• cancel: boolean - Set to true to prevent default navigation
• element: HTMLElement - The clicked item's DOM element
• event: Event - The native click event
• item: BreadcrumbItemModel - The clicked breadcrumb item
• name: string - Event name ('itemClick')

import { BreadcrumbModule, BreadcrumbClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb (itemClick)="onItemClick($event)">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>
      <e-breadcrumb-item text="Electronics" url="/products/electronics"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`
})
export class AppComponent {
  constructor(private router: Router) {}

  onItemClick(args: BreadcrumbClickEventArgs): void {
    console.log('Item clicked:', args.item.text);
    
    // Custom validation before navigation
    if (this.requiresSaveCheck(args.item)) {
      // Prevent default navigation
      args.cancel = true;
      
      // Show confirmation or perform custom action
      if (confirm('You have unsaved changes. Continue?')) {
        this.router.navigate([args.item.url]);
      }
    }
    
    // Track navigation analytics
    console.log('Navigating to:', args.item.url);
  }

  private requiresSaveCheck(item: any): boolean {
    // Custom logic to determine if save check is needed
    return false;
  }
}

---

Event Arguments

BreadcrumbBeforeItemRenderEventArgs

Interface for the beforeItemRender event:

interface BreadcrumbBeforeItemRenderEventArgs {
  cancel: boolean;          // Set true to prevent rendering
  element: HTMLElement;     // Item's DOM element
  item: BreadcrumbItemModel; // Item being rendered
  name: string;             // Event name
}

BreadcrumbClickEventArgs

Interface for the itemClick event:

interface BreadcrumbClickEventArgs {
  cancel: boolean;          // Set true to prevent navigation
  element: HTMLElement;     // Item's DOM element
  event: Event;             // Native click event
  item: BreadcrumbItemModel; // Clicked item
  name: string;             // Event name
}

---

Usage Examples

Example 1: Programmatic Item Management

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { BreadcrumbComponent } from '@syncfusion/ej2-angular-navigations';
import { BreadcrumbItemModel } from '@syncfusion/ej2-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<button (click)="addItem()">Add Item</button>
    <button (click)="removeItem()">Remove Last Item</button>
    <ejs-breadcrumb #breadcrumb [items]="items" [activeItem]="activeItem"></ejs-breadcrumb>`
})
export class AppComponent {
  @ViewChild('breadcrumb') breadcrumb!: BreadcrumbComponent;

  items: BreadcrumbItemModel[] = [
    { id: '1', text: 'Home', url: '/home' },
    { id: '2', text: 'Products', url: '/products' }
  ];

  activeItem: string = '/products';

  addItem(): void {
    const newItem: BreadcrumbItemModel = {
      id: String(this.items.length + 1),
      text: `Item ${this.items.length + 1}`,
      url: `/item/${this.items.length + 1}`
    };
    this.items.push(newItem);
    this.activeItem = newItem.url;
  }

  removeItem(): void {
    if (this.items.length > 1) {
      this.items.pop();
      this.activeItem = this.items[this.items.length - 1].url;
    }
  }
}

Example 2: Advanced Event Handling

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { BreadcrumbBeforeItemRenderEventArgs, BreadcrumbClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb 
    cssClass="custom-breadcrumb"
    [enablePersistence]="true"
    id="app-breadcrumb"
    (beforeItemRender)="beforeRender($event)"
    (itemClick)="handleClick($event)"
    (created)="onCreated()">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Home" url="/" id="home"></e-breadcrumb-item>
      <e-breadcrumb-item text="Dashboard" url="/dashboard" id="dashboard"></e-breadcrumb-item>
      <e-breadcrumb-item text="Reports" url="/reports" id="reports"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`
})
export class AppComponent {
  beforeRender(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Add icon to home item
    if (args.item.id === 'home') {
      args.item.iconCss = 'e-icons e-home';
    }
    
    // Disable future items
    if (args.item.id === 'reports') {
      args.item.disabled = false; // Or true if needed
    }
  }

  handleClick(args: BreadcrumbClickEventArgs): void {
    console.log(`User clicked on: ${args.item.text} (ID: ${args.item.id})`);
    // Custom navigation logic
  }

  onCreated(): void {
    console.log('Breadcrumb initialized and ready for interaction');
  }
}

Example 3: RTL with Persistence

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-breadcrumb 
    [enableRtl]="true"
    [enablePersistence]="true"
    id="rtl-breadcrumb"
    cssClass="rtl-breadcrumb">
    <e-breadcrumb-items>
      <e-breadcrumb-item text="الرئيسية" url="/home"></e-breadcrumb-item>
      <e-breadcrumb-item text="المنتجات" url="/products"></e-breadcrumb-item>
      <e-breadcrumb-item text="الإلكترونيات" url="/electronics"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>`,
  styles: [`
    .rtl-breadcrumb {
      direction: rtl;
    }
  `]
})
export class AppComponent {}

This comprehensive API reference covers all properties, methods, and events with practical examples for each.

Data Binding in Angular Breadcrumb

Table of Contents

• Items as Tag Directive
• Items Based on Current URL
• Static URL Configuration
• Customize Generated Item Text

Items as Tag Directive

The most explicit data binding approach uses e-breadcrumb-items and e-breadcrumb-item tag directives. Each item uses the BreadcrumbItemModel interface with properties:

• text: Display text for the item
• url: Navigation destination
• iconCss: CSS class for icons
• disabled: Enable or disable the item

Basic Example

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

This approach is ideal when:

• Items are known at compile time
• Items rarely change
• Each item has custom properties or states
• You want explicit, readable code

Items Based on Current URL

The Breadcrumb can automatically generate items from the current page URL. When neither items nor url property is provided, the component parses the browser's current location:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Breadcrumb generates items from current page URL -->
    <ejs-breadcrumb [enableNavigation]="false"></ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

For example, if the page is at https://example.com/products/electronics/laptops:

• Item 1: "products" → links to /products
• Item 2: "electronics" → links to /products/electronics
• Item 3: "laptops" → links to /products/electronics/laptops (active)

Note: This method works best in hosted environments. Development servers may show the sample location instead of actual browser location.

Static URL Configuration

Provide a static URL to the breadcrumb using the url property. The component generates items by parsing the URL path:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Generate items from provided URL path -->
    <ejs-breadcrumb 
      [enableNavigation]="false" 
      url="url">
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

The provided URL is parsed to create breadcrumb items:

• "ej2.syncfusion.com" → root
• "angular" → first level
• "demos" → second level
• "breadcrumb" → third level
• "bind-to-location" → active (last item)

Use this when:

• You want breadcrumb to reflect a specific URL structure
• Items should be derived from a known navigation path
• You need dynamic path generation without manual item definition

Customize Generated Item Text

Use the beforeItemRender event to modify generated item text. This is useful when URL segments need user-friendly names:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb 
      [enableNavigation]="false" 
      (beforeItemRender)="beforeItemRenderHandler($event)" 
      url="url">
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {
  beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Replace 'bind-to-location' with 'location'
    if (args.item.text === 'bind-to-location') {
      args.item.text = 'location';
    }
  }
}

The beforeItemRender event fires for each item before rendering. The event argument includes:

• args.item: The BreadcrumbItemModel for customization
• args.element: The DOM element being rendered

Use this event to:

• Convert kebab-case to Title Case
• Replace technical names with user-friendly labels
• Add conditional styling or properties
• Transform data before display

Data Binding Comparison

Key Properties for Data Binding

Common Patterns

Hide Last Item Behind Ellipsis

beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  if (args.item.text.length > 20) {
    args.item.text = args.item.text.substring(0, 17) + '...';
  }
}

Add Icons Dynamically

beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  if (args.item.text === 'Home') {
    args.item.iconCss = 'e-icons e-home';
  }
}

Convert Underscores to Spaces

beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  args.item.text = args.item.text.replace(/_/g, ' ');
}

Getting Started with Angular Breadcrumb

Table of Contents

• Dependencies
• Setup Angular Environment
• Install Syncfusion Package
• Add Breadcrumb Component
• Add CSS References
• Run Application
• Add Items to Breadcrumb
• Enable or Disable Navigation

Dependencies

The Breadcrumb module requires the following dependencies from Syncfusion:

@syncfusion/ej2-angular-navigations
├── @syncfusion/ej2-angular-base
└── @syncfusion/ej2-navigations
    ├── @syncfusion/ej2-base
    ├── @syncfusion/ej2-data
    ├── @syncfusion/ej2-lists
    ├── @syncfusion/ej2-inputs
    ├── @syncfusion/ej2-splitbuttons
    ├── @syncfusion/ej2-popups
        └── @syncfusion/ej2-buttons

These dependencies are automatically installed when you add the Breadcrumb package.

Setup Angular Environment

Use Angular CLI to set up your Angular application:

npm install -g @angular/cli

Install Syncfusion Package

Install the Breadcrumb component package:

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

For Angular versions below 12, use the legacy ngcc package:

npm install @syncfusion/ej2-angular-navigations@ngcc --save

Update package.json if using ngcc:

{
  "@syncfusion/ej2-angular-navigations": "20.2.38-ngcc"
}

Add Breadcrumb Component

Import BreadcrumbModule and add the component to your Angular component:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- To Render Breadcrumb -->
    <ejs-breadcrumb [enableNavigation]="false"></ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Add CSS References

Add Breadcrumb styles to your style.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3';

Alternative theme imports:

• Fabric: @import '../node_modules/@syncfusion/ej2-navigations/styles/fabric';
• Bootstrap: @import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap';
• Material: @import '../node_modules/@syncfusion/ej2-navigations/styles/material';
• Fluent: @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent';

Run Application

Start the development server:

ng serve

Open http://localhost:4200 in your browser.

Add Items to Breadcrumb

Use e-breadcrumb-items and e-breadcrumb-item directives to add navigable items. Each item follows BreadcrumbItemModel with properties like text, url, iconCss, and disabled:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item 
          iconCss="e-icons e-home" 
          url="url">
        </e-breadcrumb-item>
        <e-breadcrumb-item 
          text="Components" 
          url="url">
        </e-breadcrumb-item>
        <e-breadcrumb-item 
          text="Navigations" 
          url="url">
        </e-breadcrumb-item>
        <e-breadcrumb-item 
          text="Breadcrumb" 
          url="./breadcrumb/default">
        </e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Enable or Disable Navigation

Control breadcrumb item click behavior with the enableNavigation property:

Disable Navigation (Default Pattern)

<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
    <e-breadcrumb-item text="Products"></e-breadcrumb-item>
    <e-breadcrumb-item text="Electronics"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

When enableNavigation is false, clicking items does NOT navigate. The component displays items for visual reference only.

Enable Navigation

<ejs-breadcrumb [enableNavigation]="true">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
    <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
    <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
    <e-breadcrumb-item text="Breadcrumb" url="url"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

When enableNavigation is true and url property is set, clicking items navigates to the specified URL.

Key Takeaways

• Always enable enableRipple(true) for ripple effects
• Import BreadcrumbModule in your component's imports array
• Add CSS imports for your chosen theme
• Use e-breadcrumb-item directives for each breadcrumb level
• Control click behavior with enableNavigation property
• Structure items with text, url, and iconCss properties

Icons and Visual Enhancements in Angular Breadcrumb

Table of Contents

• Loading Icons in Breadcrumb Items
• Breadcrumb with Font Icons
• Breadcrumb with Images
• Breadcrumb with SVG Icons
• Icon Positioning
• Icon Only Items
• Show Icon Only for First Item

Loading Icons in Breadcrumb Items

The iconCss property adds visual representation to breadcrumb items. Icons enhance the navigation experience by providing visual context for each level. The Breadcrumb component supports font icons, image icons, and SVG graphics through the iconCss property.

Breadcrumb with Font Icons

Use Syncfusion's built-in font icon library (e-icons) to add icons to breadcrumb items. Set the iconCss property to e-icons followed by the specific icon class:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Common icon classes:

• e-home: Home icon
• e-folder: Folder icon
• e-file: File icon
• e-star: Star icon
• e-settings: Settings icon
• e-clock: Clock icon
• e-left-arrow: Left arrow
• e-right-arrow: Right arrow

By default, icons appear to the left of item text. Combine icon with text for maximum clarity.

Breadcrumb with Images

Add image icons to breadcrumb items using the iconCss property with a custom CSS class. Create the class with background-image pointing to your image:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-image-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Define the image CSS class in your stylesheet:

.e-image-home {
  background-image: url('./assets/home.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

Use images when:

• You need custom graphics beyond icon fonts
• Displaying brand-specific or domain-specific icons
• Integrating with existing image assets
• Achieving specific visual styling not available in fonts

Breadcrumb with SVG Icons

SVG icons provide scalable graphics for breadcrumb items. Define SVG icons using a custom CSS class:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-svg-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Define SVG CSS class in your stylesheet using mask-image or background-image:

.e-svg-home::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
  display: inline-block;
  width: 24px;
  height: 24px;
}

SVG icons are ideal for:

• Responsive, resolution-independent graphics
• Complex or multi-color icons
• Performance-optimized graphics
• Dynamic color changes via CSS

Icon Positioning

By default, icons display to the LEFT of item text. Change icon position to the RIGHT using the e-icon-right CSS class applied via the beforeItemRender event:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <div id="breadcrumb-control" class="control-section">
      <div class="header"><b>Icon Position - Left (Default)</b></div><br />
      <ejs-breadcrumb [enableNavigation]="false">
        <e-breadcrumb-items>
          <e-breadcrumb-item iconCss="e-bicons e-folder" text="Program Files"></e-breadcrumb-item>
          <e-breadcrumb-item iconCss="e-bicons e-folder" text="Services"></e-breadcrumb-item>
          <e-breadcrumb-item iconCss="e-bicons e-file" text="Config.json"></e-breadcrumb-item>
        </e-breadcrumb-items>
      </ejs-breadcrumb>
      <br /><br/>
      <div class="header"><b>Icon Position - Right</b></div><br />
      <ejs-breadcrumb [enableNavigation]="false" (beforeItemRender)="beforeItemRenderHandler($event)">
        <e-breadcrumb-items>
          <e-breadcrumb-item iconCss="e-bicons e-folder" text="Program Files"></e-breadcrumb-item>
          <e-breadcrumb-item iconCss="e-bicons e-folder" text="Services"></e-breadcrumb-item>
          <e-breadcrumb-item iconCss="e-bicons e-file" text="Config.json"></e-breadcrumb-item>
        </e-breadcrumb-items>
      </ejs-breadcrumb>
    </div>
  </div>`
})
export class AppComponent {
  public beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Add e-icon-right class to move icons to the right
    if (args.item.text !== '') {
      args.element.classList.add('e-icon-right');
    }
  }
}

Icon positioning CSS (if needed):

.e-breadcrumb .e-icon-right .e-breadcrumb-icon {
  margin-left: 8px;
  margin-right: 0;
}

Icon Only Items

Display only icons without text by omitting the text property. Use this for compact breadcrumbs or icon-based navigation:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Breadcrumb items with only icons -->
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home"></e-breadcrumb-item>
        <e-breadcrumb-item iconCss="e-bicons e-folder"></e-breadcrumb-item>
        <e-breadcrumb-item iconCss="e-bicons e-file"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Icon-only breadcrumbs work best when:

• Space is severely limited (mobile layouts)
• Icons are universally understood (home, back, forward)
• Combined with hover tooltips for clarity
• Displaying file system hierarchies

Show Icon Only for First Item

Display an icon for the first item only, with text for remaining items:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- First item with icon, rest with text only -->
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

This pattern provides:

• Visual distinction for the root/home level
• Conservation of space for intermediate levels
• Clear hierarchy indication
• Balance of icons and text

Icon Size and Styling

Control icon size and color using custom CSS:

.e-breadcrumb .e-breadcrumb-icon {
  font-size: 18px;
  color: #333;
}

.e-breadcrumb .e-breadcrumb-item:hover .e-breadcrumb-icon {
  color: #0078d4;
}

Customize icon appearance by targeting the icon element class.

Navigation Configuration in Angular Breadcrumb

Table of Contents

• URL Binding
• Relative URL Configuration
• Absolute URL Configuration
• Enable Navigation for Last Item
• Open URL in New Page or Tab

URL Binding

The Breadcrumb component enables navigation functionality by binding URLs to breadcrumb items. Each item represents a URL destination that can be navigated to when clicked. The component supports relative and absolute URL configurations for flexible navigation management.

Relative URL Configuration

Relative URLs contain only the path segment without the complete location or server details. Use relative URLs for navigating within your application:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Breadcrumb with relative URLs -->
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Relative URL patterns:

• ../ - Go up one directory level
• ./breadcrumb/getting-started - Navigate to specific folder path
• ../sibling/path - Navigate to sibling directory
• ./page - Navigate to page in current directory

Use relative URLs when:

• Navigation is within your application
• You want flexible deployment (works at any domain)
• Building multi-level navigation hierarchies
• The base path can change without breaking links

Absolute URL Configuration

Absolute URLs contain the complete path and navigate directly to the specified resource across different domains. Use absolute URLs for external links or complete navigation paths:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Breadcrumb with absolute URLs -->
    <ejs-breadcrumb [enableNavigation]="false">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Absolute URL patterns:

• https://example.com/path - Full URL with protocol and domain
• Full URL with query parameters: https://example.com/page?id=123&sort=asc
• Full URL with anchors: https://example.com/docs#section-header

Use absolute URLs when:

• Linking to external websites
• Navigating to completely different domains
• Building navigation across multiple web properties
• Creating links that should work from any location

Enable Navigation for Last Item

By default, the last breadcrumb item (active/current item) is not clickable. Enable navigation for the last item using the enableActiveItemNavigation property:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Enable navigation for all items including the last one -->
    <ejs-breadcrumb [enableNavigation]="true" [enableActiveItemNavigation]="true">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

When enableActiveItemNavigation is true:

• The last/active breadcrumb item becomes clickable
• Clicking the active item navigates to its URL
• Useful for refresh or reload scenarios
• Maintains consistent navigation behavior

When enableActiveItemNavigation is false (default):

• The last item is not clickable
• Indicates the current page/section
• Prevents accidental navigation away from current page
• Standard web breadcrumb behavior

Enable active item navigation for:

• Allowing user refresh of current page
• Creating "sticky" navigation points
• Implementing reload functionality
• Applications requiring navigation to current item

Open URL in New Page or Tab

Use the beforeItemRender event to set the target attribute of breadcrumb items, enabling them to open in new pages or tabs:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <!-- Breadcrumb items open in new tab -->
    <ejs-breadcrumb (beforeItemRender)="beforeItemRenderHandler($event)">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {
  public beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    // Set target to open in new tab
    if (args.element.children[0]) {
      (args.element.children[0] as any).target = "_blank";
    }
  }
}

Target attribute values:

• _blank - Open in new tab
• _self - Open in same window (default)
• _parent - Open in parent window
• _top - Open in top window
• Named window/frame: mywindow - Opens in window named "mywindow"

Conditional target assignment:

public beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
  // Open external links in new tab, internal in same tab
  if (args.element.children[0]) {
    if (args.item.url.startsWith('http')) {
      (args.element.children[0] as any).target = "_blank";
    } else {
      (args.element.children[0] as any).target = "_self";
    }
  }
}

Open in new tab for:

• External documentation links
• Third-party resources
• Optional reference material
• User research links

Open in same tab for:

• Internal application navigation
• Primary workflow navigation
• Default breadcrumb behavior
• Site structure navigation

Navigation Summary

Navigation provides the primary user interface for moving through hierarchical content. Combine URL configuration with event handlers for advanced control over breadcrumb behavior.

Overflow Handling in Angular Breadcrumb

Table of Contents

• Overflow Mode Overview
• Collapsed Mode
• Menu Mode
• Wrap Mode
• Scroll Mode
• Hidden Mode
• None Mode
• Choosing the Right Mode

Overflow Mode Overview

The Breadcrumb component uses maxItems and overflowMode properties to control how breadcrumb items are displayed when they exceed the available container space. The maxItems property sets the maximum number of items to display, while overflowMode determines the behavior for handling additional items.

Available overflow modes:

• Collapsed: First and last items visible, middle items behind ellipsis
• Menu: Visible items + remaining items in dropdown submenu
• Wrap: Items wrap to multiple lines
• Scroll: Horizontal scrollbar for single-line overflow
• Hidden: Only visible items shown, hidden items appear on navigation
• None: No overflow handling, all items displayed

Collapsed Mode

Collapsed mode displays the first and last breadcrumb items while hiding intermediate items behind a collapsed icon (ellipsis). When the collapsed icon is clicked, all hidden items become visible and navigable.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" [maxItems]="3" overflowMode="Collapsed">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Collapsed mode behavior:

• Shows first item + last item
• Intermediate items hidden behind ellipsis (...)
• Click ellipsis to expand and view all items
• Provides compact display while maintaining accessibility

Use Collapsed mode when:

• Space is severely limited (narrow sidebars, mobile)
• Important to show the start and end of hierarchy
• Users occasionally need to navigate middle levels
• Maintaining breadcrumb visibility is critical

Menu Mode

Menu mode displays the maximum number of breadcrumb items that fit within the container space and organizes the remaining items into a dropdown submenu. This is the default overflow mode.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" [maxItems]="3" overflowMode="Menu">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Menu mode behavior:

• Shows as many items as fit in container
• Remaining items appear in dropdown menu attached to a button
• Click menu button to see additional items
• Efficient space utilization while keeping all items accessible

Use Menu mode when:

• Need quick access to all items (dropdown always available)
• Container width is fixed but unknown
• Users frequently navigate to different levels
• Want standard dropdown behavior for navigation

Wrap Mode

Wrap mode automatically wraps breadcrumb items to multiple lines when the total width exceeds the container space. Items flow to new lines rather than being hidden.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" [maxItems]="3" overflowMode="Wrap">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Wrap mode behavior:

• Items flow to next line when space runs out
• No items are hidden
• Multiple rows visible
• All items always accessible without clicking

Use Wrap mode when:

• Space can expand vertically
• All items should always be visible
• Users benefit from seeing full navigation path
• Container width varies (responsive design)

Scroll Mode

Scroll mode displays an HTML scroll bar when the breadcrumb width exceeds the container space, allowing users to horizontally scroll to view hidden items. This maintains single-line layout while providing access.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" [maxItems]="3" overflowMode="Scroll">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Scroll mode behavior:

• Single horizontal line maintained
• Horizontal scrollbar appears when needed
• User scrolls to reveal hidden items
• No items are hidden, all accessible by scrolling

Use Scroll mode when:

• Single-line layout is critical (header constraints)
• Container width is limited and fixed
• Users can scroll horizontally
• Touch devices with scroll capability

Hidden Mode

Hidden mode displays the maximum number of items that fit within the container space and completely hides the remaining items. Hidden items become visible when users navigate to previous levels by clicking on visible breadcrumb items.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" [maxItems]="3" overflowMode="Hidden">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Hidden mode behavior:

• Shows only items that fit in available space
• Remaining items completely hidden
• As user navigates (clicks items), breadcrumb updates
• Dynamic display based on current navigation position

Use Hidden mode when:

• Space is absolutely constrained
• Users navigate actively through hierarchy
• Current position is most important
• Items appear/disappear based on navigation

None Mode

None mode displays all breadcrumb items without any overflow handling. Items are not hidden or wrapped, potentially overflowing the container.

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" overflowMode="None">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
        <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
        <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></e-breadcrumb-item>
        <e-breadcrumb-item text="Icons" url="./breadcrumb/icons"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="./breadcrumb/navigations"></e-breadcrumb-item>
        <e-breadcrumb-item text="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
        <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class='e-bicons e-arrow'></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

None mode behavior:

• All items displayed in single line
• No wrapping, scrolling, or hiding
• May overflow container boundaries
• No maxItems limit applied

Use None mode when:

• Container is flexible/unbounded
• All items must always be visible
• Overflow is acceptable
• Simple, no-frills breadcrumb display

Choosing the Right Mode

Decision Tree

Do you have space constraints?
├─ Very limited horizontally?
│  ├─ Show only first/last → Collapsed
│  └─ Show some, rest in menu → Menu
├─ Limited but flexible vertically?
│  └─ Wrap → Wrap
└─ No real constraints?
   ├─ Need single line? → Scroll
   └─ Anything goes? → None

Is navigation dynamic?
├─ Yes, user clicks items?
│  └─ Hidden
└─ No, static breadcrumb?
   └─ Choose based on space above

Common Scenarios

Mobile Navigation → Wrap or Collapsed (accommodate small screens)

Desktop Header → Menu or Scroll (single-line constraint)

File Browser → Hidden (updates as user navigates)

Documentation Site → None or Menu (generous layout)

Admin Panel → Wrapped or Menu (variable content)

Search Results → Scroll (maintain header integrity)

Overflow handling ensures breadcrumbs remain usable and accessible regardless of item count or container width. Choose the mode that best fits your layout constraints and user interaction patterns.

Templates and Customization in Angular Breadcrumb

Table of Contents

• Item Template
• Separator Template
• Custom Separator Icons
• Customize Specific Items
• Component Integration
• Advanced CSS Customization

Item Template

The itemTemplate property enables custom rendering of individual breadcrumb items. Use templates to create rich, interactive breadcrumb items with custom styling, nested components, or dynamic content.

Basic Item Template

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule, ChipListModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb cssClass="e-breadcrumb-chips">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Cart"></e-breadcrumb-item>
        <e-breadcrumb-item text="Billing"></e-breadcrumb-item>
        <e-breadcrumb-item text="Shipping"></e-breadcrumb-item>
        <e-breadcrumb-item text="Payment"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #itemTemplate let-dataSource="">
        <ejs-chiplist>
          <e-chips>
            <e-chip text={{dataSource.text}} cssClass="e-primary"></e-chip>
          </e-chips>
        </ejs-chiplist>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

The itemTemplate receives a context with access to:

• dataSource.text: Item text
• dataSource.url: Item URL
• dataSource.iconCss: Item icon CSS class
• dataSource.disabled: Item disabled state

Use item templates to:

• Render items as custom components (chips, cards, badges)
• Add interactive elements (buttons, checkboxes)
• Display item status or badges
• Integrate with third-party UI libraries
• Create specialized navigation experiences

Separator Template

The separatorTemplate property customizes the separators between breadcrumb items. Replace the default text separator with custom icons, symbols, or styled elements.

Custom Icon Separator

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb cssClass="e-breadcrumb-chips">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Cart"></e-breadcrumb-item>
        <e-breadcrumb-item text="Billing"></e-breadcrumb-item>
        <e-breadcrumb-item text="Shipping"></e-breadcrumb-item>
        <e-breadcrumb-item text="Payment"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #separatorTemplate>
        <span class="e-icons e-arrow"></span>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Separator template features:

• Access to Syncfusion icon library icons
• Custom HTML elements (spans, divs, symbols)
• CSS styling for appearance
• Animated or dynamic separators
• Different separators for different sections

Common separator icons:

• e-arrow: Right-pointing arrow
• e-slash: Forward slash (/)
• e-chevron-right: Chevron arrow
• e-circle: Circle dot
• e-dash: Dash separator

Custom Styled Separator

<ng-template #separatorTemplate>
  <span style="margin: 0 8px; color: #999;">→</span>
</ng-template>

Or use CSS classes:

<ng-template #separatorTemplate>
  <span class="custom-separator"></span>
</ng-template>

.custom-separator {
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #ccc;
  margin: 0 8px;
}

Custom Separator Icons

Combine icon classes with separators for visually distinctive breadcrumbs:

Step Indicator Separators

@Component({
  template: `<ejs-breadcrumb>
    <e-breadcrumb-items>
      <e-breadcrumb-item text="Step 1"></e-breadcrumb-item>
      <e-breadcrumb-item text="Step 2"></e-breadcrumb-item>
      <e-breadcrumb-item text="Step 3"></e-breadcrumb-item>
      <e-breadcrumb-item text="Step 4"></e-breadcrumb-item>
    </e-breadcrumb-items>
    <ng-template #separatorTemplate>
      <span class="e-icons e-circle" style="color: #ddd;"></span>
    </ng-template>
  </ejs-breadcrumb>`
})
export class AppComponent {}

Arrow Separators

<ng-template #separatorTemplate>
  <span class="e-bicons e-arrow" style="color: #666;"></span>
</ng-template>

Slash Separators

<ng-template #separatorTemplate>
  <span style="margin: 0 8px; color: #999; font-weight: bold;">/</span>
</ng-template>

Customize Specific Items

Apply conditional logic in itemTemplate to customize only certain items based on their properties:

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule, CommonModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="false" cssClass="e-specific-item-template">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #itemTemplate let-dataSource="">
        <div>
          <span *ngIf="dataSource.text === 'Breadcrumb'; else otherContent" 
            class="e-searchfor-text">
            <span style="margin-right: 5px">Search for:</span>
            <a class="e-breadcrumb-text" 
              href="{{dataSource.url}}" 
              onclick="return false">
              {{dataSource.text}}
            </a>
          </span>
          <ng-template #otherContent>
            <a class="e-breadcrumb-text" 
              href="{{dataSource.url}}" 
              onclick="return false">
              {{dataSource.text}}
            </a>
          </ng-template>
        </div>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

CSS for specific styling:

.e-searchfor-text {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #d9534f;
  font-weight: bold;
}

.e-breadcrumb-text {
  text-decoration: none;
  color: inherit;
}

Customize specific items by:

• Checking dataSource.text property
• Checking item position in array
• Applying conditional CSS classes
• Rendering different templates per item type
• Highlighting important breadcrumb levels

Component Integration

Integrate breadcrumb with other Syncfusion components using templates:

Breadcrumb with Chip Components

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule, ChipListModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb cssClass="e-breadcrumb-chips">
      <e-breadcrumb-items>
        <e-breadcrumb-item text="Cart"></e-breadcrumb-item>
        <e-breadcrumb-item text="Billing"></e-breadcrumb-item>
        <e-breadcrumb-item text="Shipping"></e-breadcrumb-item>
        <e-breadcrumb-item text="Payment"></e-breadcrumb-item>
      </e-breadcrumb-items>
      <ng-template #itemTemplate let-dataSource="">
        <ejs-chiplist>
          <e-chips>
            <e-chip 
              text="{{dataSource.text}}" 
              cssClass="e-primary">
            </e-chip>
          </e-chips>
        </ejs-chiplist>
      </ng-template>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Integration enables:

• Using breadcrumb with other Syncfusion components
• Creating rich, interactive navigation experiences
• Combining breadcrumb with buttons, chips, badges
• Multi-feature navigation interfaces
• Component composition patterns

Advanced CSS Customization

Customize breadcrumb appearance using CSS without modifying templates:

Custom Styling

/* Breadcrumb container */
.e-breadcrumb {
  background-color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Breadcrumb items */
.e-breadcrumb-item {
  color: #0078d4;
  font-weight: 500;
}

.e-breadcrumb-item:hover {
  color: #106ebe;
  text-decoration: underline;
}

/* Active/last item */
.e-breadcrumb-item.e-active {
  color: #333;
  font-weight: bold;
  pointer-events: none;
}

/* Icons */
.e-breadcrumb-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* Separators */
.e-breadcrumb-separator {
  margin: 0 8px;
  color: #999;
}

Theme Customization

Apply color themes via CSS variables or custom classes:

/* Light theme */
.e-breadcrumb-light {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

.e-breadcrumb-light .e-breadcrumb-item {
  color: #333;
}

/* Dark theme */
.e-breadcrumb-dark {
  background-color: #2d2d2d;
  border: 1px solid #444;
}

.e-breadcrumb-dark .e-breadcrumb-item {
  color: #f0f0f0;
}

Responsive Customization

/* Mobile layout */
@media (max-width: 768px) {
  .e-breadcrumb {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .e-breadcrumb-icon {
    font-size: 14px;
  }
}

/* Tablet layout */
@media (max-width: 1024px) {
  .e-breadcrumb {
    padding: 10px 14px;
  }
}

Focus and Accessibility Styling

/* Keyboard focus */
.e-breadcrumb-item:focus {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .e-breadcrumb-item {
    font-weight: bold;
  }
  
  .e-breadcrumb-separator {
    color: #000;
  }
}

Template Best Practices

1. Keep Templates Simple: Avoid complex logic in templates, use component methods instead 2. Preserve Context: Always maintain access to breadcrumb data through dataSource 3. Responsive Design: Consider mobile and tablet layouts in template styling 4. Performance: Avoid rendering expensive components in every item template 5. Accessibility: Maintain semantic HTML and ARIA attributes in templates 6. Consistency: Use consistent styling across all item templates 7. Testing: Test templates with varying item counts and content lengths

Templates enable complete customization of breadcrumb appearance and behavior, allowing integration with existing design systems and component libraries.