Syncfusion Angular Breadcrumb

Implementing Syncfusion Angular Breadcrumb

The Breadcrumb component provides a navigation aid that displays the user's current location within a hierarchy of pages or sections. It offers clickable links to parent levels and visually represents the breadcrumb trail.

When to Use This Skill

Use this skill when you need to:

• Implement breadcrumb navigation trails in Angular applications
• Display user location within page hierarchies
• Enable navigation to parent sections
• Add icons and visual enhancements to breadcrumb items
• Handle overflow with multiple display modes
• Customize breadcrumb appearance with templates
• Configure data binding for breadcrumb items

Component Overview

The Syncfusion Angular Breadcrumb component (ejs-breadcrumb) is part of the @syncfusion/ej2-angular-navigations package. It displays a series of links in hierarchical order, with each item representing a navigation level. The component supports:

• Multiple data binding approaches: items as directives, URL-based, or static configuration
• Icon support: font icons, images, and SVG graphics
• Navigation control: enable/disable, open in new tabs, last-item navigation
• Overflow handling: 6 different modes for space-constrained layouts
• Template customization: item templates and separator customization
• Event handling: beforeItemRender for dynamic customization

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Module imports and enableRipple configuration
• Basic breadcrumb component rendering
• Adding items with e-breadcrumb-items directive
• Enabling and disabling navigation functionality
• CSS imports and theme application

Data Binding

📄 Read: references/data-binding.md

• Items as tag directives with properties
• Generating items from current URL
• Static URL configuration for breadcrumb items
• Using the url property to bind navigation paths
• beforeItemRender event for customization
• Customizing generated item text

Icons and Visual Enhancements

📄 Read: references/icons-and-visuals.md

• Adding font icons using iconCss property
• Using image icons in breadcrumb items
• SVG icon implementation
• Icon positioning (left and right alignment)
• Icon-only items without text
• First-item-only icon patterns

Navigation Configuration

📄 Read: references/navigations.md

• Relative URL configuration
• Absolute URL configuration
• enableNavigation property control
• enableActiveItemNavigation for last-item navigation
• Opening breadcrumb items in new tabs or pages
• Link target and navigation behavior

API Reference

📄 Read: references/api-reference.md

• All properties, methods, and events for breadcrumb
• BreadcrumbItemModel details
• BreadcrumbBeforeItemRenderEventArgs and BreadcrumbClickEventArgs
• Component methods like destroy

Overflow Handling

📄 Read: references/overflow-handling.md

• maxItems and overflowMode properties
• Collapsed mode for compact display
• Menu mode with dropdown submenus
• Wrap mode for multi-line layouts
• Scroll mode with horizontal scrollbar
• Hidden mode with dynamic visibility
• None mode for no overflow handling

Templates and Customization

📄 Read: references/templates-customization.md

• itemTemplate for custom item rendering
• separatorTemplate for custom separators
• Custom separator icons and styling
• Conditional item templates
• Component integration (e.g., ChipList)
• Advanced CSS customization

Quick Start Example

Basic breadcrumb with items and navigation:

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">
    <ejs-breadcrumb [enableNavigation]="true">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Products" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Electronics" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Laptops" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

Common Patterns

Disable Navigation

Set enableNavigation="false" to prevent clicking items:

<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

Add Icons to Items

Use iconCss with Syncfusion icon classes:

<e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>

Handle Overflow

Use maxItems and overflowMode for space-constrained layouts:

<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">

Enable Last Item Navigation

Allow clicking the active/last item:

<ejs-breadcrumb [enableActiveItemNavigation]="true">

Customize Separators

Replace default separators with custom icons:

<ng-template #separatorTemplate>
  <span class='e-bicons e-arrow'></span>
</ng-template>

Key Properties

Common Use Cases

1. E-commerce Navigation: Show product hierarchy (Home > Categories > Subcategory > Product)
2. File System Browser: Display folder path with accessible parent folders
3. Documentation Site: Breadcrumb trail through documentation hierarchy
4. Blog Navigation: Show post category and current article location
5. Admin Dashboard: Display section and subsection location
6. Multi-step Forms: Show form progress and completion steps

Next Steps:

• Read getting-started.md to set up the breadcrumb component
• Choose a data binding approach from data-binding.md
• Enhance with icons from icons-and-visuals.md
• Configure navigation from navigations.md
• Handle overflow with overflow-handling.md
• Customize templates from templates-customization.md