syncfusion-angular-breadcrumb

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Breadcrumb

实现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.

Breadcrumb组件是一种导航辅助工具，用于显示用户在页面或版块层级结构中的当前位置。它提供指向父级的可点击链接，直观呈现面包屑导航路径。

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

当你需要以下功能时，可使用本技能：

在Angular应用中实现面包屑导航路径
在页面层级中显示用户当前位置
支持导航至父级版块
为面包屑项添加图标及视觉增强效果
通过多种显示模式处理溢出情况
通过模板自定义面包屑外观
为面包屑项配置数据绑定

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

Syncfusion Angular Breadcrumb组件（

ejs-breadcrumb

）属于

@syncfusion/ej2-angular-navigations

包。它按层级顺序显示一系列链接，每个项代表一个导航级别。该组件支持：

多种数据绑定方式：通过指令定义项、基于URL或静态配置
图标支持：字体图标、图片和SVG图形
导航控制：启用/禁用导航、在新标签页打开、最后一项导航设置
溢出处理：针对空间受限布局的6种不同模式
模板定制：项模板和分隔符定制
事件处理：beforeItemRender事件用于动态定制

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

📄 阅读： references/getting-started.md

安装与包配置
模块导入及enableRipple配置
基础面包屑组件渲染
使用e-breadcrumb-items指令添加项
启用和禁用导航功能
CSS导入及主题应用

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

📄 阅读： references/data-binding.md

通过标签指令定义带属性的项
根据当前URL生成项
为面包屑项配置静态URL
使用url属性绑定导航路径
利用beforeItemRender事件进行定制
自定义生成项的文本

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

📄 阅读： references/icons-and-visuals.md

使用iconCss属性添加字体图标
在面包屑项中使用图片图标
SVG图标实现
图标定位（左对齐和右对齐）
仅显示图标无文本的项
仅第一项显示图标的模式

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

📄 阅读： references/navigations.md

相对URL配置
绝对URL配置
enableNavigation属性控制
enableActiveItemNavigation用于最后一项导航
在新标签页或窗口中打开面包屑项
链接目标与导航行为

API Reference

API参考

📄 Read: references/api-reference.md

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

📄 阅读： references/api-reference.md

面包屑的所有属性、方法和事件
BreadcrumbItemModel详情
BreadcrumbBeforeItemRenderEventArgs和BreadcrumbClickEventArgs
组件方法如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

📄 阅读： references/overflow-handling.md

maxItems和overflowMode属性
折叠模式用于紧凑显示
菜单模式带下拉子菜单
换行模式用于多行布局
滚动模式带水平滚动条
隐藏模式带动态可见性
无模式（不处理溢出）

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

📄 阅读： references/templates-customization.md

itemTemplate用于自定义项渲染
separatorTemplate用于自定义分隔符
自定义分隔符图标和样式
条件项模板
组件集成（如ChipList）
高级CSS定制

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 {}

带项和导航功能的基础面包屑：

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>

设置

enableNavigation="false"

以防止点击项：

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>

结合Syncfusion图标类使用

iconCss

：

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">

针对空间受限布局使用

maxItems

和

overflowMode

：

html

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

Enable Last Item Navigation

启用最后一项导航

Allow clicking the active/last item:

html

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

允许点击当前激活的最后一项：

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>

使用自定义图标替换默认分隔符：

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

属性	类型	默认值	用途
`items`	数组	-	BreadcrumbItemModel项的数组
`url`	字符串	-	用于从路径生成项的静态URL
`enableNavigation`	布尔值	true	启用/禁用项点击导航
`enableActiveItemNavigation`	布尔值	false	允许点击当前激活的最后一项
`maxItems`	数字	-	溢出前可显示的最大项数
`overflowMode`	字符串	'Menu'	溢出处理模式
`itemTemplate`	模板	-	用于自定义项渲染的模板
`separatorTemplate`	模板	-	用于自定义分隔符的模板
`cssClass`	字符串	-	用于样式设置的CSS类
`beforeItemRender`	事件	-	项渲染前触发的事件

Common Use Cases

常见用例

E-commerce Navigation: Show product hierarchy (Home > Categories > Subcategory > Product)
File System Browser: Display folder path with accessible parent folders
Documentation Site: Breadcrumb trail through documentation hierarchy
Blog Navigation: Show post category and current article location
Admin Dashboard: Display section and subsection location
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

电商导航：显示产品层级（首页 > 分类 > 子分类 > 产品）
文件系统浏览器：显示文件夹路径及可访问的父文件夹
文档站点：文档层级的面包屑导航路径
博客导航：显示文章分类及当前文章位置
管理后台：显示版块及子版块位置
多步骤表单：显示表单进度及完成步骤

下一步：

阅读getting-started.md设置面包屑组件
从data-binding.md中选择一种数据绑定方式
通过icons-and-visuals.md添加图标增强效果
参考navigations.md配置导航
通过overflow-handling.md处理溢出
参考templates-customization.md定制模板