Angular Breadcrumbs-Komponente | ng-hub-ui-breadcrumbs

Angular Breadcrumbs-Komponente mit Router-Integration, individuellen Templates, RTL-Unterstützung und flexiblen Styling-Tokens.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

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.

Code

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.

Code

Custom Templates

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Code

Icons Breadcrumbs

Breadcrumbs - Iconos

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

Code

RTL Breadcrumbs

Breadcrumbs - RTL

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

Code

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.

Code