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.
Ejemplos interactivos
Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.
Migas básicas
Migas básicas
Una ruta leída directamente de la configuración de rutas, sin nada que conectar.
Items are generated from the data.breadcrumb configuration of active routes.
Código
Migas dinámicas
Migas dinámicas
Etiquetas construidas a partir de un marcador de la ruta y los datos que devuelve su resolver.
The last crumb comes from a route declaring breadcrumb: "Dynamic: {name}", resolved with that route's data. This page has no router tree, so the demo is handed the resulting trail — the route configuration is in the TS tab.
Código
Plantillas personalizadas
Plantillas personalizadas
Toma el control del marcado de cada miga con la plantilla hubBreadcrumbItem.
The hubBreadcrumbItem directive allows custom rendering of each element.
Código
Iconos en la ruta
Iconos en la ruta
Iconos declarados en los datos de la ruta, renderizados con una plantilla propia.
Código
Disposición RTL
Disposición RTL
Soporte de derecha a izquierda, con el separador en el lado del que viene la ruta.
Código
Truncado y tooltip
Truncado y tooltip
Recorta una etiqueta larga con puntos suspensivos y muestra el texto completo al pasar el ratón.
Each label is capped at --hub-breadcrumb-max-item-width (12rem). Only the items that overflow get a tooltip.
Código
Colapso de rutas largas
Six crumbs, no collapsing — the default
maxItems = 4 — one crumb each side of the indicator
maxItems = 4 with two crumbs kept on each side
Indicator opened 0 time(s) — that is the collapsedClick output. The trail expands on its own and collapses again on the next navigation.
Destinos fuera del router
Example.com leaves the app in a new tab, llms.txt downloads a file, and Design system is an ordinary in-app crumb routed through routerLink. The last crumb is never a link, whatever it declares.
Anillo de foco de teclado
Default ring — press Tab to walk the trail
Re-tinted ring on the same markup
The ring reaches the collapsed indicator too, which is a button and therefore part of the tab order. Note where the overrides live: the focus tokens are declared on :host, so a value set on an ancestor never reaches them — put it on the <hub-breadcrumb> element or inside it. (The accent slot is the one exception, left undeclared on purpose so it does inherit.)
La ruta como señal
INV-2026-0184
in Invoices · 5 levels deep
The heading and the crumbs are two readings of the same signal. Only the trail changes when you move; neither the header nor the component is told anything.