Data binding in EJ2 JavaScript Breadcrumb control
2 May 20237 minutes to read
The Breadcrumb supports to generate items based on the current URL by default. You can set the items
property or url
property to generate the items.
Items based on current Url
The breadcrumb items can be generated based on the current URL of the page when the user does not specify the breadcrumb items using items
property. The following example shows the breadcrumb items generated from the provided URL in the component.
ej.base.enableRipple(true);
new ej.navigations.Breadcrumb({
enableNavigation: false
}, '#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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
This sample is hosted in different location, so the Breadcrumb component is rendered with different location instead of the actual location.
Absolute Url
The breadcrumb items can be generated based on the url
property in the component when the user does not specify the breadcrumb items using items
property. The following example shows the breadcrumb items generated from the provided url in the component.
ej.base.enableRipple(true);
new ej.navigations.Breadcrumb({
enableNavigation: false,
url: "https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"
}, '#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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Customize text when generated items using Url
The breadcrumb items text can be customized by using the beforeItemRender
event. In the following example, bind-to-location
text was changed as location
.
ej.base.enableRipple(true);
new ej.navigations.Breadcrumb({
enableNavigation: false,
url: "https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location",
beforeItemRender: function(args) {
if (args.item.text === 'bind-to-location') {
args.item.text = 'location';
}
}
}, '#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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<nav id="breadcrumb"></nav>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>