Angular

Introduction

System Requirements

Browser Compatibility

NPM Packages

API Reference

Release Notes

Getting Started

Installation and Upgrade

Upgrade

Licensing

Appearance

Common

Frameworks and Feature

Visual Studio Code Integration

Visual Studio Integration

Accordion

Accumulation Chart

AppBar

AutoComplete

Avatar

Badge

Barcode

Breadcrumb

Bullet Chart

Button

ButtonGroup

Calendar

Card

Carousel

Chart

CheckBox

Chips

Circular Gauge

ColorPicker

ComboBox

ContextMenu

Dashboard Layout

DataManager

DatePicker

DateRangePicker

DateTimePicker

Diagram

Dialog

DocumentEditor

DropDownButton

DropDownList

Dropdown Tree

FileManager

FloatingActionButton

Gantt

Grid

HeatMap Chart

Image Editor

In-place Editor

Kanban

Linear Gauge

ListBox

ListView

Maps

MaskedTextBox

Mention

Menu Bar

Message

MultiSelect

NumericTextBox

Pager

PDF Viewer

Pivot Table

Predefined Dialogs

ProgressBar

ProgressButton

QueryBuilder

RadioButton

Range Navigator

Range Slider

RichTextEditor

Schedule

Sidebar

Signature

Skeleton

Smith Chart

Sparkline

SpeedDial

Spinner

SplitButton

Splitter

Spreadsheet

Stock Chart

Toggle Switch Button

Tabs

TextBox

TimePicker

Toast

Toolbar

Tooltip

Tree Grid

TreeMap

TreeView

Uploader

/ Breadcrumb / Overflow Mode

Search results

Overflow Mode in Angular Breadcrumb component

21 Dec 2022 / 4 minutes to read

Overflow Mode

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.

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

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

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

enableRipple(true);

@Component({
selector: 'app-root',
template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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

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

enableRipple(true);

@Component({
selector: 'app-root',
template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Wrap

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

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

enableRipple(true);

@Component({
selector: 'app-root',
template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Scroll

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

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

enableRipple(true);

@Component({
selector: 'app-root',
template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

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

enableRipple(true);

@Component({
selector: 'app-root',
template: `<!-- 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>`
})

export class AppComponent {}

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BreadcrumbModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

None

None mode shows all the items on a single line.

Breadcrumb / Templates

Breadcrumb / Accessibility

Contents

Overflow Mode
Collapsed
Menu
Wrap
Scroll
Hidden
None