Angular 面包屑组件 | ng-hub-ui-breadcrumbs
Angular 面包屑组件，支持 Router 集成、自定义模板、RTL 以及灵活的样式 token。
最后更新 2026年8月17日
概览
团队为何搜索这个库
当路由上下文很重要，且你需要一个能配合 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).
代码
代码
导入:
模板:
组件:
Truncation & Tooltip
Clip long breadcrumb labels with an ellipsis and reveal the full text on hover
Breadcrumbs - Truncation & Tooltip
Enable truncateItems to clip long labels with an ellipsis; hover a clipped item to read the full text.
Each label is capped at --hub-breadcrumb-max-item-width (12rem). Only the items that overflow get a tooltip.
代码
代码
导入:
模板:
组件:
核心特性
最近更改
Version 22.4.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.4.1 - 7/28/26, 12:00 AM
fixed: The active (last) crumb now declares aria-current=page so assistive technology announces the current position.
Version 22.3.0 - 6/29/26, 12:00 AM
added: Opt-in per-item truncation via the `truncateItems` input + `--hub-breadcrumb-max-item-width`.
added: `HubBreadcrumbLabelDirective` showing a tooltip only when a label overflows.
added: Optional hub-ui tooltip integration via `provideHubBreadcrumbTooltip(hubTooltipAdapter)` (native `title` fallback).