Search results

Icons in JavaScript (ES5) Breadcrumb control

26 Nov 2021 / 4 minutes to read

The Breadcrumb component contains an icon/image to provide a visual representation of an item.

Icon in Breadcrumb item

To load the icon/image on the breadcrumb item, set the iconCss property.

To place the font icon on the breadcrumb item, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the item.

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

var items = [
    {
        iconCss: 'e-icons e-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/breadcrumb/default",
    },
    {
        text: "Breadcrumb",
        url: "./breadcrumb/default",
    }
    ];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#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">

    <!--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-image-home {
  background-image: url('home.png');
  height: 20px;
  width: 20px;
}

.e-svg-home {
  background-image: url('home.svg');
  height: 20px;
  width: 20px;
}

In the Breadcrumb component, images can be added for the items using the iconCss property. In the following example, an image was added to the breadcrumb item by using the iconCss class e-image-home and specifying height and width for the css class.

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

var items = [
    {
        iconCss: "e-image-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/breadcrumb/default",
    },
    {
        text: "Breadcrumb",
        url: "./breadcrumb/default",
    }
    ];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#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">

    <!--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-image-home {
  background-image: url('home.png');
  height: 20px;
  width: 20px;
}

.e-svg-home {
  background-image: url('home.svg');
  height: 20px;
  width: 20px;
}

In the Breadcrumb component, SVG image can be added for the items using the iconCss property. In the following example, SVG image was added to the breadcrumb item by using the iconCss class e-svg-home and specifying height and width for the css class.

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

var items = [
    {
        iconCss: "e-svg-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/breadcrumb/default",
    },
    {
        text: "Breadcrumb",
        url: "./breadcrumb/default",
    }
    ];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#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">

    <!--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-image-home {
  background-image: url('home.png');
  height: 20px;
  width: 20px;
}

.e-svg-home {
  background-image: url('home.svg');
  height: 20px;
  width: 20px;
}

Icon Position

By default, the icon is positioned to the left side of the item in the Breadcrumb component. If you need to add the icon to right of the breadcrumb item, add the e-icon-right class to the required item. In the following example, the e-icon-right class was added to the breadcrumb items using the beforeItemRender event. You can also add the e-icon-right class to the cssClass property of the breadcrumb component to position the icons to the right of all breadcrumb items.

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

var items = [
        {
            text: "Program Files",
            iconCss: "e-icons e-folder"
        },
        {
            text: "Services",
            iconCss: "e-icons e-folder"
        },
        {
            text: "Config.json",
            iconCss: "e-icons e-file"
        }
    ];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#breadcrumb');

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false,
    beforeItemRender: function(args) {
        if(args.item.text !== '') {
            args.element.classList.add('e-icon-right');
        }
    }
}, '#breadcrumb2');
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">

    <!--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 id="breadcrumb-control" class="control-section">
            <div class="header"><b>Icon Position - Left</b></div><br>
            <nav id="breadcrumb"></nav>
            <br><br>
            <div class="header"><b>Icon Position - Right</b></div><br>
            <nav id="breadcrumb2"></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-folder:before {
  content: "\ec04";
}

.e-file:before {
  content: "\e240";
}

#breadcrumb-control {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

#breadcrumb-control .header {
	text-align: left;
	padding-left: 10px;
}

#breadcrumb-control .e-control.e-breadcrumb {
	text-align: left;
}

Icon Only

To display only icons for the items, add icons using the iconCss property. In the following example, breadcrumb items were demonstrated with only icons by providing the iconCss property.

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

var items = [
    {
        iconCss: 'e-icons e-home'
    },
    {
        iconCss: "e-icons e-folder"
    },
    {
        iconCss: "e-icons e-file"
    }
];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#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">

    <!--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-folder:before {
  content: "\ec04";
}

.e-file:before {
  content: "\e240";
}

Show icon only for first item

To show icon only for the first item in the Breadcrumb component, add icons to the first item using the iconCss property. In the following example, the icon was provided only for the first item by setting the iconCss property.

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

var items = [
    {
        iconCss: "e-svg-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/breadcrumb/default",
    },
    {
        text: "Breadcrumb",
        url: "./breadcrumb/default",
    }
    ];

new ej.navigations.Breadcrumb({ 
    items: items,
    enableNavigation: false
}, '#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">

    <!--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-image-home {
  background-image: url('home.png');
  height: 20px;
  width: 20px;
}

.e-svg-home {
  background-image: url('home.svg');
  height: 20px;
  width: 20px;
}