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.
Referencia API
Aquí tienes el contrato completo de breadcrumbs: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Ajusta breadcrumbs a tu gusto con 3 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Flujo Observable de elementos de migas de pan generados automáticamente a partir de los datos de la ruta. |
variant | string | — | Acento semántico para los enlaces del breadcrumb (p.ej. primary, success) o cualquier token personalizado. |
truncateItems | boolean | false | Si es true, recorta cada etiqueta a --hub-breadcrumb-max-item-width con puntos suspensivos y muestra un tooltip al desbordar. |
Outputs
Todavía no hay outputs documentados.
Templates
Hazlo tuyo — 1 plantillas para proyectar tu propio marcado.
| Nombre | Descripción | Ejemplo |
|---|---|---|
hubBreadcrumbItem | Plantilla personalizada para renderizar elementos individuales de las migas de pan | <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
@if (!isLast) {
<a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a>
} @else {
<span class="breadcrumb-current">{{ item.label }}</span>
}
</ng-template> |