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 7 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`items`	`BreadcrumbItem[] \| null`	`null`	Ruta proporcionada por el consumidor, que sustituye a la derivada del router. Si se deja en null, el componente sigue leyendo HubBreadcrumbsService.
`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 cuando desborda. También alcanza a una plantilla hubBreadcrumbItem: el componente envuelve el contenido proyectado en un span.hub-breadcrumb__custom propio y recorta esa caja, porque los estilos encapsulados no llegan a elementos que pertenecen al componente consumidor.
`maxItems`	`number \| undefined`	`undefined`	Longitud a partir de la cual la ruta se colapsa tras un indicador. Undefined nunca colapsa, por larga que sea la ruta.
`itemsBeforeCollapse`	`number`	`1`	Migas que se conservan al principio de una ruta colapsada.
`itemsAfterCollapse`	`number`	`1`	Migas que se conservan al final de una ruta colapsada, incluida la página actual.
`collapsedAriaLabel`	`string`	`'Show the hidden breadcrumb items'`	Nombre accesible del indicador colapsado, para que la única cadena que anuncia este componente pueda traducirla la aplicación anfitriona.

Outputs

Reacciona a lo que hace breadcrumbs: 1 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`collapsedClick`	`void`	Se emite al activar el indicador colapsado. La ruta se expande por sí sola; el evento es para consumidores que además quieran reaccionar.

Métodos

Controla breadcrumbs desde el código — 3 métodos en su superficie programática.

Nombre	Firma	Devuelve	Descripción
`HubBreadcrumbsService.breadcrumbs`	`breadcrumbs: Signal<BreadcrumbItem[]>`	`Signal<BreadcrumbItem[]>`	La ruta como señal, y la superficie que lee el propio componente. Se envuelve una sola vez dentro del servicio y se suscribe una sola vez para toda la aplicación, de modo que una cabecera, el título del documento o cualquier otro lector deriva de ella sin async pipe.
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	La misma ruta como Observable, que se mantiene para el código que ya compone con rxjs. Ambos miembros informan de la misma navegación: se toma el que ya hable el código que llama.
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	Registra una sola vez un adaptador de tooltip para toda la aplicación, de modo que una etiqueta recortada muestre el tooltip de hub-ui en vez del atributo title nativo. Si se quita el provider, las etiquetas vuelven a title.

Templates

Hazlo tuyo — 2 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>`
`hubBreadcrumbLabel`	Directiva que muestra como tooltip el texto completo de una etiqueta recortada. El componente ya la aplica a las etiquetas que renderiza y a la caja en la que envuelve una plantilla hubBreadcrumbItem, así que ponerla a mano sirve solo para cambiar el texto del tooltip.	`<a class="my-crumb" hubBreadcrumbLabel [routerLink]="item.url">{{ item.label }}</a>`