Templates in Angular Breadcrumb component

4 Sep 20258 minutes to read

The Breadcrumb component provides flexible template customization options to create rich, interactive navigation experiences. Use the itemTemplate property to customize individual breadcrumb items and the separatorTemplate property to customize the separators between items, enabling full control over the visual presentation and functionality.

Item Template

The following example demonstrates customizing breadcrumb items using the itemTemplate property. This shopping cart navigation scenario shows how breadcrumb items can be enhanced with chip components to create a more engaging user interface.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
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">
            <!-- To Render Breadcrumb. -->
            <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= cssClass="e-primary"></e-chip>
                        </e-chips>
                    </ejs-chiplist>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Separator Template

The following example shows how to customize separators between breadcrumb items using the separatorTemplate property. Custom icons replace the default separator to create a more visually distinctive navigation path.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
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">
            <!-- To Render Breadcrumb. -->
            <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 {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize Specific Item Template

Individual breadcrumb items can be customized selectively using itemTemplate with conditional rendering logic. The following example demonstrates how to apply custom styling with a span element specifically to items containing “Breadcrumb” in their text, while leaving other items with default styling.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
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">
            <!-- To Render Breadcrumb. -->
        <ejs-breadcrumb [enableNavigation]="false" cssClass="e-specific-item-template">
            <e-breadcrumb-items>
                <e-breadcrumb-item text="Home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/menu/default"></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"></a></span>
            <ng-template #otherContent>
                <a class="e-breadcrumb-text" href="dataSource.url" onclick="return false"></a>
                            </ng-template>
                </div>
            </ng-template>
        </ejs-breadcrumb>
        </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));