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 al desbordar.
`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.

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>`