Composant Breadcrumbs Angular | ng-hub-ui-breadcrumbs

Composant breadcrumbs Angular avec intégration au Router, templates personnalisés, support RTL et tokens de style flexibles.

Vue d’ensemble

Pourquoi les équipes recherchent cette bibliothèque

Utilisez ces breadcrumbs Angular lorsque le contexte de route compte et que vous avez besoin d'une aide à la navigation qui fonctionne avec le Router Angular, les templates et des chemins de navigation structurés.

Installation

npm install ng-hub-ui-breadcrumbs

Aller à

Idéal pour

  • sites de documentation
  • panneaux d'administration
  • applications multi-niveaux
  • navigation sensible à la route

À propos de breadcrumbs

ng-hub-ui-breadcrumbs offre aux applications Angular un composant breadcrumb sensible à la route pour les panneaux d'administration, les sites de documentation et les produits multi-niveaux. Il est utile lorsque la profondeur de navigation augmente et que les utilisateurs ont besoin de plus d'orientation qu'un simple bouton retour.

Guides de fonctionnalités

Fonctionnalités principales

Fonctionnalité essentielle du breadcrumb avec détection automatique des routes et affichage du chemin de navigation.

Exemples:
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:

Contenu dynamique

Résolution dynamique du contenu du breadcrumb à partir des données de route et des resolvers, avec prise en charge des espaces réservés.

Exemples:
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 et personnalisation

Options de personnalisation riches avec templates personnalisés pour les éléments du breadcrumb et un style amélioré.

Exemples:
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:

Fonctionnalités avancées

Fonctionnalités améliorées incluant la prise en charge des icônes et la compatibilité avec la mise en page RTL pour les applications internationales.

Exemples:
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:

Fonctionnalités clés

Changements récents

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

Bibliothèques associées

ng-hub-ui-nav ng-hub-ui-utils ng-hub-ui-portal