Componente Breadcrumbs para Angular | ng-hub-ui-breadcrumbs

Componente breadcrumbs para Angular con integración con Router, plantillas personalizadas, soporte RTL y tokens de estilo flexibles.

Visión General

Por qué los equipos buscan esta librería

Usa estos breadcrumbs para Angular cuando el contexto de ruta importe y necesites una ayuda de navegación que funcione con Angular Router, plantillas y rutas jerárquicas.

Instalación

npm install ng-hub-ui-breadcrumbs

Ir a

Ideal para

  • sitios de documentación
  • paneles de administración
  • apps multinivel
  • navegación sensible a la ruta

Sobre breadcrumbs

ng-hub-ui-breadcrumbs aporta a las aplicaciones Angular un componente breadcrumb sensible a la ruta para paneles de administración, sitios de documentación y productos con varios niveles. Resulta útil cuando la navegación crece y el usuario necesita más orientación que un simple botón atrás.

Guías de uso

Core Features

Essential breadcrumb functionality with automatic route detection and navigation path display.

Ejemplos:
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.

Código

Código
Import:
Template:
Component:

Dynamic Content

Dynamic breadcrumb content resolution from route data and resolvers with placeholder support.

Ejemplos:
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.

Código

Template

Routing Configuration

Código
Import:
Template:
Component:

Templates & Customization

Rich customization options with custom templates for breadcrumb items and enhanced styling.

Ejemplos:
Plantillas personalizadas

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.

Código

Template

Component

Código
Import:
Template:
Component:

Advanced Features

Enhanced functionality including icon support and RTL layout compatibility for international applications.

Ejemplos:
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.

Código

Template

Component

Código
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).

Código

Template

Component

Código
Import:
Template:
Component:

Características clave

Integrado con Angular Router

Genera trails de breadcrumb desde la estructura de rutas sin mantener etiquetas manuales en cada página.

Renderizado personalizable

Sustituye separadores y plantillas de item para adaptarlo al patrón de navegación y al estilo de marca.

Funciona en layouts complejos

Útil en back offices, bases de conocimiento y shells de aplicación anidados.

Cambios recientes

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

Librerías relacionadas

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

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.

Código

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.

Código

Template

Routing Configuration

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Código

Template

Component

Breadcrumbs - Iconos

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

Código

Template

Component

Breadcrumbs - RTL

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

Código

Template

Component

Breadcrumbs - CSS Variables Styling

Customization of dividers, colors, and spacing through CSS variables

Custom Colors (via CSS class)

Código

Template

Component