Templates in Breadcrumb
12 Apr 20225 minutes to read
The Breadcrumb 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
.
@Html.EJS().Breadcrumb("itemTemplate").ItemTemplate("#chipTemplate").CssClass("e-breadcrumb-chips").Items(item =>
{
item.Text("Cart").Add();
item.Text("Billing").Add();
item.Text("Shipping").Add();
item.Text("Payment").Add();
}).Render()
<script id="chipTemplate" type="text/x-template">
<div class="e-lib e-chip-list e-control e-chip-set">
<div class="e-chip" tabindex="0" role="option" aria-label="Apple" aria-selected="false">
<span class="e-chip-text">${text}</span>
</div>
</div>
</script>
public ActionResult Index()
{
return View();
}
Output be like the below.
Separator Template
In the following example, the separators are customized with icons using separatorTemplate
.
@Html.EJS().Breadcrumb("separatorTemplate").SeparatorTemplate("<span class="e-icons e-bullet-arrow"></span>").Items(item =>
{
item.Text("Cart").Add();
item.Text("Billing").Add();
item.Text("Shipping").Add();
item.Text("Payment").Add();
}).Render()
<style>
.e-bullet-arrow::before {
content: '\e253';
font-size: 21px;
}
@@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-icons {
font-family: 'e-icons' !important;
font-size: 14px;
}
</style>
public ActionResult Index()
{
return View();
}
Output be like the below.
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.
@Html.EJS().Breadcrumb("specific-item-template").CssClass("e-specific-item-template").ItemTemplate("#specificItemTemplate").Items(item =>
{
item.Text("Home").Url("https://ej2.syncfusion.com/home/aspnetmvc.html").Add();
item.Text("Components").Url("https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview").Add();
item.Text("Navigations").Url("https://ej2.syncfusion.com/aspnetmvc/Menu/DefaultFunctionalities").Add();
item.Text("Breadcrumb").Url("./DefaultFunctionalities").Add();
}).Render()
<script id="specificItemTemplate" type="text/x-template">
<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>
</script>
<script>
function beforeItemRenderHandler(args) {
if (args.item.text !== 'Program Files') {
args.item.disabled = true;
}
}
</script>
@section Scripts {
<script>
document.getElementById("reset").addEventListener('click', function () {
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
for (var i = 0; i < breadcrumbs.length; i++) {
breadcrumb = breadcrumbs[i];
breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
}
});
</script>
<style>
.e-searchfor-text {
display: flex;
align-items: center;
font-size: 14px;
font-weight: normal;
}
.e-searchfor-text .e-breadcrumb-text {
padding-left: 0;
}
.e-bigger .e-searchfor-text {
font-size: 16px
}
.fabric .e-searchfor-text,
.fabric-dark .e-searchfor-text,
.highcontrast .e-searchfor-text {
font-size: 18px;
}
.e-bigger.fabric .e-searchfor-text,
.e-bigger.fabric-dark .e-searchfor-text,
.e-bigger.highcontrast .e-searchfor-text {
font-size: 21px;
}
.e-specific-item-template .e-breadcrumb-item:last-child a:hover {
text-decoration: underline;
}
</style>
}
public ActionResult Index()
{
return View();
}
Output be like the below.