Angular 面包屑组件 | ng-hub-ui-breadcrumbs
Angular 面包屑组件，支持 Router 集成、自定义模板、RTL 以及灵活的样式 token。
概览
团队为何搜索这个库
当路由上下文很重要，且你需要一个能配合 Angular Router、模板和结构化导航路径的导航辅助时，请使用这些 Angular 面包屑。
安装
npm install ng-hub-ui-breadcrumbs跳转到
适用于
- 文档站点
- 管理后台
- 多层级应用
- 感知路由的导航
关于 breadcrumbs
ng-hub-ui-breadcrumbs 为 Angular 应用提供了一个感知路由的面包屑组件，适用于管理后台、文档站点和多层级产品。当导航深度增长、用户需要比返回按钮更多的方向感时，它会非常有用。
功能指南
核心功能
基础的 breadcrumbs 功能，支持自动路由检测和导航路径显示。
示例:
Basic Breadcrumbs
Simple breadcrumbs displaying navigation path from route configuration
Breadcrumbs - Basic Setup
Basic usage of breadcrumbs component showing current route based on route data
Items are generated from the data.breadcrumb configuration of active routes.
代码
代码
导入:
模板:
组件:
动态内容
从路由数据和解析器动态解析 breadcrumbs 内容，并支持占位符。
示例:
Dynamic Breadcrumbs
Breadcrumbs with dynamic content from route resolvers and data
Breadcrumbs - Dynamic Data
Dynamic breadcrumbs with placeholders resolved from route data and resolvers
The last item uses the template "Dynamic: {name}" and is resolved with route data.
代码
代码
导入:
模板:
组件:
模板与自定义
丰富的自定义选项，可为 breadcrumbs 项使用自定义模板并增强样式。
示例:
Custom Templates
Custom breadcrumb item templates with enhanced styling and icons
Breadcrumbs - Custom Templates
Custom template usage for rendering breadcrumb items with custom styling
The hubBreadcrumbItem directive allows custom rendering of each element.
代码
代码
导入:
模板:
组件:
高级功能
增强功能，包括图标支持以及面向国际化应用的 RTL 布局兼容性。
示例:
Icons Breadcrumbs
Breadcrumb items with custom icons rendered from route data using custom templates
Breadcrumbs - Iconos
Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.
代码
代码
导入:
模板:
组件:
RTL Breadcrumbs
Right-to-left layout support with automatic divider flipping for international applications
Breadcrumbs - RTL
Soporte para idiomas con lectura de derecha a izquierda (RTL).
代码
代码
导入:
模板:
组件:
核心特性
最近更改
Version 20.0.2 - 9/17/24, 12:00 AM
added: Comprehensive documentation page with functional examples
added: Basic breadcrumbs example with automatic route detection
added: Dynamic breadcrumbs example with placeholder resolution from route data
added: Custom templates example with enhanced styling and icons
added: Icons breadcrumbs example with visual indicators
added: RTL support example for right-to-left layouts
added: CSS variables styling example with complete theming options
added: Live functional examples in documentation with syntax highlighting
changed: Updated documentation structure with dedicated overview, API, and examples sections
changed: Enhanced code examples with proper TypeScript and HTML highlighting
changed: Improved example organization by functionality categories
Version 20.0.1 - 3/20/24, 12:00 AM
added: Full Angular 21 compatibility
added: Enhanced automatic route detection
added: Improved Bootstrap 5 styling compatibility
fixed: Performance optimizations for route data resolution
changed: Comprehensive README documentation
Version 20.0.0 - 1/15/24, 12:00 AM
changed: Migrated to Angular 21 with standalone components
added: Automatic breadcrumb generation from route configuration
added: Custom template support with hubBreadcrumbItem directive
added: Dynamic content resolution from route resolvers
added: RTL layout support for international applications
added: CSS custom properties for complete theming control