Template in React Breadcrumb component

30 Jan 202312 minutes to read

The Breadcrumb component provides a way to customize the items using itemTemplate and the separators using separatorTemplate properties.

Item Template

In the following example, Shopping Cart details are used as breadcrumb Items and the items are customized by the chips component using itemTemplate.

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

In the following example, the separators are customized with icons using separatorTemplate.

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

The specific breadcrumb item can be customizable using itemTemplate with conditional rendering. In the following example, added the span element only for the breadcrumb text in breadcrumb item.

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