Search results

Overflow Mode in JavaScript (ES5) Breadcrumb control

23 Sep 2022 / 4 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.

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;
}

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.

Source
Preview
index.html
styles.css
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;
}

Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.

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,
    overflowMode: 'Menu'
}, '#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;
}

Wrap

Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.

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,
    overflowMode: 'Wrap'
}, '#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;
}

Scroll

Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.

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,
    overflowMode: 'Scroll',
    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;
}

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.

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,
    overflowMode: 'Hidden'
}, '#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;
}

None

None mode shows all the items in a single line.