Overflow in Angular Breadcrumb component

4 Sep 202516 minutes to read

Overflow Mode

The Breadcrumb component uses the maxItems and overflowMode properties to control how breadcrumb items are displayed when they exceed the available container space. The maxItems property sets the maximum number of items to display, while overflowMode determines the behavior for handling additional items.

In the following example, maxItems is set to 3 with overflowMode as Menu (default). To prevent breadcrumb item navigation, the enableNavigation property has been set to false in the Breadcrumb component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following overflow modes are available in the Breadcrumb component to handle items that exceed the container space:

  • Collapsed
  • Menu
  • Wrap
  • Scroll
  • Hidden
  • None

Collapsed

Collapsed mode displays the first and last breadcrumb items while hiding intermediate items behind a collapsed icon (ellipsis). When the collapsed icon is clicked, all hidden items become visible and navigable, providing a compact view that maintains access to all navigation levels.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 overflowMode="Collapsed" >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Menu mode displays the maximum number of breadcrumb items that fit within the container space and organizes the remaining items into a dropdown submenu. This mode provides efficient space utilization while keeping all items accessible through the overflow menu.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 overflowMode="Menu" >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Wrap

Wrap mode automatically wraps breadcrumb items to multiple lines when the total width exceeds the container space.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 overflowMode="Wrap" >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Scroll

Scroll mode displays an HTML scroll bar when the breadcrumb width exceeds the container space, allowing users to horizontally scroll to view hidden items. This mode maintains the single-line layout while providing access to all items through scrolling.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 overflowMode="Scroll" >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hidden

Hidden mode displays the maximum number of items that fit within the container space and completely hides the remaining items. Hidden items become visible when users navigate to previous levels by clicking on visible breadcrumb items, creating a dynamic navigation experience.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations'



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false" [maxItems]=3 overflowMode="Hidden" >
                <e-breadcrumb-items>
                   <e-breadcrumb-item text="Home" url="../"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Getting" url="./breadcrumb/getting-started"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Data-Binding" url="./breadcrumb/data-binding"></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="Templates" url="./breadcrumb/templates"></e-breadcrumb-item>
                   <e-breadcrumb-item text="Overflow" url="./breadcrumb/overflow"></e-breadcrumb-item>
                </e-breadcrumb-items>
                <ng-template #separatorTemplate>
                    <span class='e-bicons e-arrow'></span>
                </ng-template>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

None

None mode shows all the items on a single line.