Templates in React Breadcrumb component

React

Search results

22 Nov 2022 / 2 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.

Source

Preview

index.jsx

index.html

index.css

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';
class App extends React.Component {
    chipTemplate(data) {
        return (<ChipListComponent>
                <ChipsDirective>
                    <ChipDirective text={data.text}></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>);
    }
    render() {
        return (<BreadcrumbComponent cssClass="e-breadcrumb-chips" itemTemplate={this.chipTemplate}>
                <BreadcrumbItemsDirective>
                    <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
                </BreadcrumbItemsDirective>
            </BreadcrumbComponent>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}

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';

class App extends React.Component<{}, {}> {
   chipTemplate(data: any): JSX.Element {
        return (
            <ChipListComponent>
                <ChipsDirective>
                    <ChipDirective text={data.text}></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>
        );
    }
    public render() {
        return (
            <BreadcrumbComponent cssClass="e-breadcrumb-chips" itemTemplate={this.chipTemplate}>
                <BreadcrumbItemsDirective>
                    <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
                </BreadcrumbItemsDirective>
            </BreadcrumbComponent>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));

Separator Template

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

Source

Preview

index.jsx

index.html

index.css

index.tsx

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

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}

.content-wrapper {
    width: 90%;
    margin: 0 auto;
    min-width: 85px;
    padding-top: 20px;
}

.content-wrapper div.row {
    padding: 15px 0px;
}

@media only screen and (max-width: 480px) {
    .content-wrapper {
        width: 92%;
    }

    .col-xs-6,
    .col-xs-4,
    .col-xs-12 {
        padding: 10px 5px;
        width: 100%;
    }

    .content-wrapper div.row {
        padding: 0px;
    }
}

@font-face {
    font-family: 'e-bicons';
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    .e-bicons {
        font-family: 'e-bicons' !important;
        font-size: 14px;
	}
    .e-arrow:before {
        content: "\e253";
        font-weight: 800;
        font-size: 21px;
    }

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

class App extends React.Component<{}, {}> {
       arrowSeparatorTemplate(): JSX.Element {
        return (
            <span className="e-icons e-arrow"></span>
        );
    }
    public render() {
        return (
            <BreadcrumbComponent separatorTemplate={this.arrowSeparatorTemplate}>
                <BreadcrumbItemsDirective>
                    <BreadcrumbItemDirective text="Cart"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Billing"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Shipping"></BreadcrumbItemDirective>
                    <BreadcrumbItemDirective text="Payment"></BreadcrumbItemDirective>
                </BreadcrumbItemsDirective>
            </BreadcrumbComponent>
        );
    }
}
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.

Source

Preview

index.jsx

index.html

index.css

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    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>);
    }
    render() {
        return (<BreadcrumbComponent itemTemplate={this.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>);
    }
}
ReactDom.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ContextMenu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

body {
	margin-top: 100px;
	text-align: center;
}

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

class App extends React.Component<{}, {}> {
    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>
        );
    }
    public render() {
        return (
            <BreadcrumbComponent itemTemplate={this.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>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));

Contents

Item Template
Separator Template
Customize Specific Item Template

Contents

Item Template
Separator Template
Customize Specific Item Template

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!