Templates in React Breadcrumb

4 Sep 202613 minutes to read

The React Breadcrumb component provides flexible template customization options to create rich, interactive navigation experiences. Use the itemTemplate property to customize individual React 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 React Breadcrumb items using the itemTemplate property. This shopping cart navigation scenario shows how React Breadcrumb items can be enhanced with chip components to create a more engaging user interface.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function chipTemplate(data) {
        return (<ChipListComponent>
                <ChipsDirective>
                    <ChipDirective text={data.text}></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>);
    }
    return (<BreadcrumbComponent cssClass="e-breadcrumb-chips" itemTemplate={chipTemplate}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

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

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>
                <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Separator Template

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

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function arrowSeparatorTemplate() {
        return (<span className="e-icons e-arrow"></span>);
    }
    return (<BreadcrumbComponent separatorTemplate={arrowSeparatorTemplate}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    function   arrowSeparatorTemplate(): JSX.Element {
        return (
            <span className="e-icons e-arrow"></span>
        );
    }
    return (
        <BreadcrumbComponent separatorTemplate={arrowSeparatorTemplate}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Customize Specific Item Template

Individual React 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.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function specificItemTemplate(data) {
        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="https://ej2.syncfusion.com/home/react.html#platform"/>
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview/"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default"/>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

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="https://ej2.syncfusion.com/home/react.html#platform" />
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));