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 each items is rendered as chips component using itemTemplate.
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
//Breadcrumb items definition
const items: BreadcrumbItemModel[] = [
{
text: 'Cart'
},
{
text: 'Billing'
},
{
text: 'Shipping'
},
{
text: 'Payment'
}
];
new Breadcrumb({
items: items,
enableNavigation: false,
itemTemplate: '<div id="chip-default" class="e-lib e-chip-list e-control e-chip-set" role="listbox" aria-multiselectable="false"><div class="e-chip e-primary" tabindex="0" role="option" aria-label="Apple" aria-selected="false"><span class="e-chip-text">${text}</span></div></div>'
}, '#breadcrumb');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<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='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
</body>
</html>body {
margin-top: 100px;
text-align: center;
}
.e-bullet-arrow::before {
content: '\e253';
font-size: 21px;
}In the following example, the separators are customized with icons using separatorTemplate. While rendering the separator template, you can get the previous and next item using previousItem and nextItem variables, respectively.
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
//Breadcrumb items definition
const items: BreadcrumbItemModel[] = [
{
text: 'Cart'
},
{
text: 'Billing'
},
{
text: 'Shipping'
},
{
text: 'Payment'
}
];
new Breadcrumb({
items: items,
enableNavigation: false,
separatorTemplate: '<span class="e-icons e-bullet-arrow"></span>'
}, '#breadcrumb');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<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='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
</body>
</html>body {
margin-top: 100px;
text-align: center;
}
.e-bullet-arrow::before {
content: '\e253';
font-size: 21px;
}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 { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
var specificTemplateItems = [
{
text: "Home",
url: "https://ej2.syncfusion.com/demos",
},
{
text: "Components",
url: "https://ej2.syncfusion.com/demos/#/material/grid/grid-overview",
},
{
text: "Navigations",
url: "https://ej2.syncfusion.com/demos/#/material/menu/default",
},
{
text: "Breadcrumb",
url: "./breadcrumb/default",
}
];
new Breadcrumb({
items: specificTemplateItems,
itemTemplate: '<div>${if(text=="Breadcrumb")}<span class="e-searchfor-text"><span style="margin-right: 5px">Search for:</span><a class="e-breadcrumb-text" href="${url}" onclick="return false">${text}</a></span>${else}<a class="e-breadcrumb-text" href="${url}" onclick="return false">${text}</a>${/if}</div>',
cssClass: 'e-specific-item-template'
}, '#breadcrumb');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<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='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
</body>
</html>body {
margin-top: 100px;
text-align: center;
}
.e-bullet-arrow::before {
content: '\e253';
font-size: 21px;
}