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](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](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](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](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](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](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](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: ```ts 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: ```html <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: ```html <e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item> ``` ### Handle Overflow Use `maxItems` and `overflowMode` for space-constrained layouts: ```html <ejs-breadcrumb [maxItems]="3" overflowMode="Menu"> ``` ### Enable Last Item Navigation Allow clicking the active/last item: ```html <ejs-breadcrumb [enableActiveItemNavigation]="true"> ``` ### Customize Separators Replace default separators with custom icons: ```html <ng-template #separatorTemplate> <span class='e-bicons e-arrow'></span> </ng-template> ``` ## Key Properties | Property | Type | Default | Purpose | |----------|------|---------|---------| | `items` | Array | - | Array of BreadcrumbItemModel items | | `url` | String | - | Static URL to generate items from path | | `enableNavigation` | Boolean | true | Enable/disable item click navigation | | `enableActiveItemNavigation` | Boolean | false | Allow clicking the active/last item | | `maxItems` | Number | - | Maximum items to display before overflow | | `overflowMode` | String | 'Menu' | Overflow handling mode | | `itemTemplate` | Template | - | Template for custom item rendering | | `separatorTemplate` | Template | - | Template for custom separators | | `cssClass` | String | - | CSS class for styling | | `beforeItemRender` | Event | - | Event before item rendering | ## 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