Angular Breadcrumbs-Komponente | ng-hub-ui-breadcrumbs
Angular Breadcrumbs-Komponente mit Router-Integration, individuellen Templates, RTL-Unterstützung und flexiblen Styling-Tokens.
Ü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:
Hauptfunktionen
Letzte Änderungen
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