Data binding in Vue Breadcrumb component
16 Mar 20234 minutes to read
Items as tag directive
The React Breadcrumb contains <e-breadcrumb-items>
and <e-breadcrumb-item>
tags to render items for the component. To bind items, use <e-breadcrumb-items>
tag and <e-breadcrumb-item>
tag to bind properties for breadcrumb items.
<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 Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(BreadcrumbPlugin);
export default {
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>
Items based on current URL
The breadcrumb items can be generated from the current URL of the page, if the url
property is not provided or when the user does not specify the breadcrumb items using the <e-breadcrumb-item>
tag. The following example shows the breadcrumb items that are generated based on the current URL.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false'></ejs-breadcrumb>
</div>
</template>
<script>
import Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(BreadcrumbPlugin);
export default {
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>
This sample is hosted in different location, so the Breadcrumb Component is rendered with different location instead of the actual location.
Static URL
The breadcrumb items can be generated by providing the url
property in the component, if the user does not specify the breadcrumb items using the <e-breadcrumb-item>
tag. The following example shows the breadcrumb items generated from the provided url in the component.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false' url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location"></ejs-breadcrumb>
</div>
</template>
<script>
import Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(BreadcrumbPlugin);
export default {
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>
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 customized as location
.
<template>
<div>
<ejs-breadcrumb :enableNavigation='false' url="https://ej2.syncfusion.com/demos/breadcrumb/bind-to-location" :beforeItemRender="beforeItemRenderHandler">
</ejs-breadcrumb>
</div>
</template>
<script>
import Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(BreadcrumbPlugin);
export default {
data: function() {
return {};
},
methods: {
beforeItemRenderHandler: function(args) {
if (args.item.text === 'bind-to-location') {
args.item.text = 'location';
}
}
}
}
</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>