Search results

Templates in JavaScript (ES5) Breadcrumb control

26 Nov 2021 / 2 minutes to read

The Breadcrumb component 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 each items is rendered as chips component using itemTemplate.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

var items = [
    {
        text: 'Cart'
    },
    {
        text: 'Billing'
    },
    {
        text: 'Shipping'
    },
    {
        text: 'Payment'
    }
    ];

new ej.navigations.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');
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/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://cdn.syncfusion.com/ej2/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>
Copied to clipboard
body {
  margin-top: 100px;
  text-align: center;
}

.e-bullet-arrow::before {
  content: '\e253';
  font-size: 21px;
}

Separator Template

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.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

var items = [
    {
        text: 'Cart'
    },
    {
        text: 'Billing'
    },
    {
        text: 'Shipping'
    },
    {
        text: 'Payment'
    }
];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false,
    separatorTemplate: '<span class="e-icons e-bullet-arrow"></span>'
}, '#breadcrumb');
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/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://cdn.syncfusion.com/ej2/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>
Copied to clipboard
body {
  margin-top: 100px;
  text-align: center;
}

.e-bullet-arrow::before {
  content: '\e253';
  font-size: 21px;
}