Overflow in Vue Breadcrumb component
11 Jun 202422 minutes to read
In the Breadcrumb component, maxItems
and overflowMode
properties were used to limit the number of breadcrumb items to be displayed.
In the following example, the maxItems
is set as 3 with overflowMode
as Default. To prevent breadcrumb item navigation, the enableNavigation
property has been set to false in the Breadcrumb component.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' :separatorTemplate="separatorTemplate">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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 separatorTemplate = '<span class="e-bicons e-arrow"></span>';
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/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-breadcrumb .e-breadcrumb-separator+.e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-bicons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e706";
font-weight: 800;
font-size: 9px;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' :separatorTemplate="separatorTemplate">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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 {
separatorTemplate: '<span class="e-bicons e-arrow"></span>',
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/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-breadcrumb .e-breadcrumb-separator+.e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-bicons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e706";
font-weight: 800;
font-size: 9px;
}
</style>
The following overflow modes are available in the Breadcrumb component.
- Collapsed
- Menu
- Wrap
- Scroll
- Hidden
- None
Collapsed
Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Collapsed">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Collapsed">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
Menu
Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Menu">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Menu">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
Wrap
Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Wrap">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Wrap">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
Scroll
Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Scroll">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Scroll">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
Hidden
Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will make the hidden item visible.
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Hidden">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
<template>
<div>
<ejs-breadcrumb maxItems='3' :enableNavigation='false' overflowMode="Hidden">
<e-breadcrumb-items>
<e-breadcrumb-item text='Home' url='../'></e-breadcrumb-item>
<e-breadcrumb-item text='Breadcrumb' url='./breadcrumb'></e-breadcrumb-item>
<e-breadcrumb-item text='Default' url='./breadcrumb/default'></e-breadcrumb-item>
<e-breadcrumb-item text='Icons' url='./breadcrumb/icons'></e-breadcrumb-item>
<e-breadcrumb-item text='Navigations' url='./breadcrumb/navigations'></e-breadcrumb-item>
<e-breadcrumb-item text='Overflow' url='./breadcrumb/overflow'></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";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
</style>
None
None mode shows all the items on a single line.