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.
ej.base.enableRipple(true);
var items = [
{
text: "Home",
url: "../"
},
{
text: "Getting",
url: "./breadcrumb/getting-started"
},
{
text: "Data-Binding",
url: "./breadcrumb/data-binding"
},
{
text: "Icons",
url: "./breadcrumb/icons"
},
{
text: "Navigation",
url: "./breadcrumb/navigation"
},
{
text: "templates",
url: "./breadcrumb/templates"
},
{
text: "Overflow",
url: "./breadcrumb/overflow"
}
];
new ej.navigations.Breadcrumb({
items: items,
enableNavigation: false,
maxItems: 3,
separatorTemplate: '<span class="e-icons e-arrow"></span>'
}, '#breadcrumb');
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
The following overflow modes are available in the Breadcrumb component.
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.
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
ej.base.enableRipple(true);
var items = [
{
text: "Home",
url: "../"
},
{
text: "Getting",
url: "./breadcrumb/getting-started"
},
{
text: "Data-Binding",
url: "./breadcrumb/data-binding"
},
{
text: "Icons",
url: "./breadcrumb/icons"
},
{
text: "Navigation",
url: "./breadcrumb/navigation"
},
{
text: "templates",
url: "./breadcrumb/templates"
},
{
text: "Overflow",
url: "./breadcrumb/overflow"
}
];
new ej.navigations.Breadcrumb({
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: 'Menu'
}, '#breadcrumb');
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
ej.base.enableRipple(true);
var items = [
{
text: "Home",
url: "../"
},
{
text: "Getting",
url: "./breadcrumb/getting-started"
},
{
text: "Data-Binding",
url: "./breadcrumb/data-binding"
},
{
text: "Icons",
url: "./breadcrumb/icons"
},
{
text: "Navigation",
url: "./breadcrumb/navigation"
},
{
text: "templates",
url: "./breadcrumb/templates"
},
{
text: "Overflow",
url: "./breadcrumb/overflow"
}
];
new ej.navigations.Breadcrumb({
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: 'Wrap'
}, '#breadcrumb');
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
ej.base.enableRipple(true);
var items = [
{
text: "Home",
url: "../"
},
{
text: "Getting",
url: "./breadcrumb/getting-started"
},
{
text: "Data-Binding",
url: "./breadcrumb/data-binding"
},
{
text: "Icons",
url: "./breadcrumb/icons"
},
{
text: "Navigation",
url: "./breadcrumb/navigation"
},
{
text: "templates",
url: "./breadcrumb/templates"
},
{
text: "Overflow",
url: "./breadcrumb/overflow"
}
];
new ej.navigations.Breadcrumb({
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: 'Scroll',
separatorTemplate: '<span class="e-icons e-arrow"></span>'
}, '#breadcrumb');
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
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.
ej.base.enableRipple(true);
var items = [
{
text: "Home",
url: "../"
},
{
text: "Getting",
url: "./breadcrumb/getting-started"
},
{
text: "Data-Binding",
url: "./breadcrumb/data-binding"
},
{
text: "Icons",
url: "./breadcrumb/icons"
},
{
text: "Navigation",
url: "./breadcrumb/navigation"
},
{
text: "templates",
url: "./breadcrumb/templates"
},
{
text: "Overflow",
url: "./breadcrumb/overflow"
}
];
new ej.navigations.Breadcrumb({
items: items,
enableNavigation: false,
maxItems: 3,
overflowMode: 'Hidden'
}, '#breadcrumb');
<!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/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/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>
body {
margin-top: 100px;
text-align: center;
}
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
padding-left: 0;
margin-left: -8px;
}
.e-icons.e-arrow {
margin-top: -2px;
}
.e-arrow:before {
content: "\e253";
font-weight: 800;
font-size: 18px;
}
None mode shows all the items in a single line.