Search results

Overflow Mode in Angular Breadcrumb component

08 Dec 2021 / 1 minute to read

Overflow Mode

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
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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 {}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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