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

Funcionalidades principales

Funcionalidad esencial de breadcrumbs con detección automática de rutas y visualización de la ruta de navegación.

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:

Contenido dinámico

Resolución dinámica del contenido de los breadcrumbs a partir de los datos de ruta y los resolvers, con soporte para marcadores de posición.

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

Código
Import:
Template:
Component:

Plantillas y personalización

Amplias opciones de personalización con plantillas personalizadas para los elementos de los breadcrumbs y un estilo mejorado.

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

Código

Código
Import:
Template:
Component:

Funcionalidades avanzadas

Funcionalidad mejorada que incluye soporte de iconos y compatibilidad con disposición RTL para aplicaciones internacionales.

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

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

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

Código

Código
Import:
Template:
Component:

Características clave

Cambios recientes

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).

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