This section explains how to create a simple Breadcrumb, and configure its available functionalities in Vue using Vue quickstart seed repository.
The following list of dependencies are required to use the Breadcrumb component in your application.
|-- @syncfusion/ej2-vue-navigations
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Install Syncfusion Breadcrumb
packages using below command.
npm install @syncfusion/ej2-vue-navigations --save
Vue.use()
Import the Breadcrumb Plugin from the Essential JS 2 Vue package and register the same using Vue.use()
with Component Plugin as its argument.
Refer to the code snippet given below.
import Vue from 'vue';
import { BreadcrumbPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use( BreadcrumbPlugin);
export default {}
By registering component plugin in Vue, all child directives are also globally registered. We can also use
Vue.Component()
to registerBreadcrumb
. Refer here to know more about component registration.
Add the EJ2 Vue Breadcrumb using <ejs-breadcrumb>
to the <template>
section of the App.vue
file in src
directory.
<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>
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a basic Breadcrumb component.
<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>
Use items
property to bind items for Breadcrumb component. The below example demonstrates the basic rendering of Breadcrumb with items support.
<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>
This feature enables or disables the item navigation. By default, the navigation will be enabled when setting Url
property. To prevent breadcrumb item navigation, set enableNavigation
property as false in Breadcrumb. The below example shows enabling and disabling the navigation of Breadcrumb items.
<template>
<div>
<div id="breadcrumb-control">
<div class="header"><b>Enable Navigation- false</b></div><br />
<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>
<br />
<br/>
<div class="header"><b>Enable Navigation- true</b></div><br />
<ejs-breadcrumb :enableNavigation='true'>
<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>
</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;
}
#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>