Angular 面包屑组件 | ng-hub-ui-breadcrumbs

Angular 面包屑组件，支持 Router 集成、自定义模板、RTL 以及灵活的样式 token。

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

Basic Breadcrumbs

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.

代码

Dynamic Breadcrumbs

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.

代码

Custom Templates

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

代码

Icons Breadcrumbs

Breadcrumbs - Iconos

Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.

代码

RTL Breadcrumbs

Breadcrumbs - RTL

Soporte para idiomas con lectura de derecha a izquierda (RTL).

代码

Truncation & Tooltip

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.

代码