Search results

Overflow Mode in JavaScript (ES5) Breadcrumb control

08 Dec 2021 / 2 minutes to read

In the Breadcrumb component, maxItems and overflowMode properties were used to limit the number of breadcrumb items to be displayed.

The following overflow modes are available in the Breadcrumb component.

  • Default - Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
  • Collapsed - Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items will become visible.

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.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
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');
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/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/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>
Copied to clipboard
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;
}