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.
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="//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">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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>body {
margin-top: 100px;
text-align: center;
}This sample is hosted in different location, so the Breadcrumb component is rendered with different location instead of the actual location.
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="//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">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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>body {
margin-top: 100px;
text-align: center;
}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="//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">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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>body {
margin-top: 100px;
text-align: center;
}