The Breadcrumb component provides a way to customize the items using itemTemplate
and the separators using separatorTemplate
properties.
In the following example, Shopping Cart details are used as breadcrumb Items and the items are customized by the chips component using itemTemplate
.
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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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'));
In the following example, the separators are customized with icons using separatorTemplate
.
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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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'));
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.
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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/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'));