Angular Breadcrumbs-Komponente | ng-hub-ui-breadcrumbs
Angular Breadcrumbs-Komponente mit Router-Integration, individuellen Templates, RTL-Unterstützung und flexiblen Styling-Tokens.
Zuletzt aktualisiert 17.08.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Nutze diese Angular Breadcrumbs, wenn der Routen-Kontext zählt und du eine Navigationshilfe brauchst, die mit dem Angular Router, Templates und strukturierten Navigationspfaden funktioniert.
Installieren
npm install ng-hub-ui-breadcrumbsSpringen zu
Ideal für
- Dokumentationsseiten
- Admin-Panels
- mehrstufige Apps
- routenbewusste Navigation
Über breadcrumbs
ng-hub-ui-breadcrumbs gibt Angular-Anwendungen eine routenbewusste Breadcrumb-Komponente für Admin-Panels, Dokumentationsseiten und mehrstufige Produkte. Sie ist nützlich, wenn die Navigationstiefe wächst und Benutzer mehr Orientierung benötigen, als ein Zurück-Button bieten kann.
Funktionsleitfäden
Kernfunktionen
Grundlegende breadcrumbs-Funktionalität mit automatischer Routenerkennung und Anzeige des Navigationspfads.
Beispiele:
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.
Code
Code
Import:
Template:
Component:
Dynamischer Inhalt
Dynamische Auflösung von breadcrumbs-Inhalten aus Routendaten und Resolvern mit Platzhalterunterstützung.
Beispiele:
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.
Code
Code
Import:
Template:
Component:
Templates & Anpassung
Umfangreiche Anpassungsmöglichkeiten mit benutzerdefinierten Templates für breadcrumbs-Elemente und erweitertem Styling.
Beispiele:
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.
Code
Code
Import:
Template:
Component:
Erweiterte Funktionen
Erweiterte Funktionalität einschließlich Symbolunterstützung und RTL-Layout-Kompatibilität für internationale Anwendungen.
Beispiele:
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.
Code
Code
Import:
Template:
Component:
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).
Code
Code
Import:
Template:
Component:
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.
Code
Code
Import:
Template:
Component:
Hauptfunktionen
Letzte Änderungen
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).