Icons in Vue Breadcrumb component
11 Jun 202424 minutes to read
Loading Icons in Breadcrumb Item
To load the icon on the breadcrumb item, set the iconCss
property.
Breadcrumb with font icons
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.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-icons e-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-icons e-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
'e-breadcrumb-item': BreadcrumbItemDirective,
'e-breadcrumb-items': BreadcrumbItemsDirective
},
data: function () {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
Breadcrumb with Image
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.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-image-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.e-image-home {
background-image: url('home.png');
height: 20px;
width: 20px;
background-size: 20px;
}
</style>
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-image-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
'e-breadcrumb-item': BreadcrumbItemDirective,
'e-breadcrumb-items': BreadcrumbItemsDirective
},
data: function () {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.e-image-home {
background-image: url('home.png');
height: 20px;
width: 20px;
background-size: 20px;
}
</style>
Breadcrumb with SVG Image
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.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-svg-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.e-svg-home {
background-image: url('home.svg');
height: 20px;
width: 20px;
background-size: 20px;
}
</style>
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-svg-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
'e-breadcrumb-item': BreadcrumbItemDirective,
'e-breadcrumb-items': BreadcrumbItemsDirective
},
data: function () {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.e-svg-home {
background-image: url('home.svg');
height: 20px;
width: 20px;
background-size: 20px;
}
</style>
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 right to 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.
<template>
<div id="breadcrumb-control">
<div class='header'><b>IconPosition- left</b></div><br />
<ejs-breadcrumb>
<e-breadcrumb-items>
<e-breadcrumb-item text="Program Files" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Services" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Config.json" iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
<br />
<br />
<div class='header'><b>IconPosition- Right</b></div><br />
<ejs-breadcrumb :beforeItemRender="beforeItemRenderHandler">
<e-breadcrumb-items>
<e-breadcrumb-item text="Program Files" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Services" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Config.json" iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
const beforeItemRenderHandler = (args) => {
if (args.element) {
args.element.classList.add('e-icon-right');
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
@font-face {
font-family: 'e-bicons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-bicons {
font-family: 'e-bicons' !important;
font-size: 14px;
}
.e-folder:before {
content: "\e704";
}
.e-file:before {
content: "\e703";
}
#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;
}
</style>
<template>
<div id="breadcrumb-control">
<div class='header'><b>IconPosition- left</b></div><br />
<ejs-breadcrumb>
<e-breadcrumb-items>
<e-breadcrumb-item text="Program Files" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Services" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Config.json" iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
<br />
<br />
<div class='header'><b>IconPosition- Right</b></div><br />
<ejs-breadcrumb :beforeItemRender="beforeItemRenderHandler">
<e-breadcrumb-items>
<e-breadcrumb-item text="Program Files" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Services" iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item text="Config.json" iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
"e-breadcrumb-items": BreadcrumbItemsDirective,
"e-breadcrumb-item": BreadcrumbItemDirective
},
data: function () {
return {};
},
methods: {
beforeItemRenderHandler: function (args) {
if (args.element) {
args.element.classList.add('e-icon-right');
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
@font-face {
font-family: 'e-bicons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-bicons {
font-family: 'e-bicons' !important;
font-size: 14px;
}
.e-folder:before {
content: "\e704";
}
.e-file:before {
content: "\e703";
}
#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;
}
</style>
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.
<template>
<div>
<ejs-breadcrumb>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss="e-icons e-home"></e-breadcrumb-item>
<e-breadcrumb-item iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
@font-face {
font-family: 'e-bicons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-bicons {
font-family: 'e-bicons' !important;
font-size: 14px;
}
.e-folder:before {
content: "\e704";
}
.e-file:before {
content: "\e703";
}
</style>
<template>
<div>
<ejs-breadcrumb>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss="e-icons e-home"></e-breadcrumb-item>
<e-breadcrumb-item iconCss="e-bicons e-folder"></e-breadcrumb-item>
<e-breadcrumb-item iconCss="e-bicons e-file"></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
"e-breadcrumb-items": BreadcrumbItemsDirective,
"e-breadcrumb-item": BreadcrumbItemDirective
},
data: function () {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
@font-face {
font-family: 'e-bicons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-bicons {
font-family: 'e-bicons' !important;
font-size: 14px;
}
.e-folder:before {
content: "\e704";
}
.e-file:before {
content: "\e703";
}
</style>
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.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-icons e-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script setup>
import { BreadcrumbComponent as EjsBreadcrumb, BreadcrumbItemDirective as EBreadcrumbItem, BreadcrumbItemsDirective as EBreadcrumbItems } from "@syncfusion/ej2-vue-navigations";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'>
<e-breadcrumb-items>
<e-breadcrumb-item iconCss='e-icons e-home' url='https://ej2.syncfusion.com/vue/demos/'></e-breadcrumb-item>
<e-breadcrumb-item text='Components'
url='https://ej2.syncfusion.com/vue/demos/datagrid/overview'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations'
url='https://ej2.syncfusion.com/vue/demos/menu/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb'
url='https://ej2.syncfusion.com/vue/demos/breadcrumb/default'></e-breadcrumb-item>
</e-breadcrumb-items>
</ejs-breadcrumb>
</div>
</template>
<script>
import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-breadcrumb": BreadcrumbComponent,
"e-breadcrumb-items": BreadcrumbItemsDirective,
"e-breadcrumb-item": BreadcrumbItemDirective
},
data: function () {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>