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.
Basic Breadcrumbs
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
Dynamic Breadcrumbs
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
Custom Templates
Breadcrumbs - Custom Templates
Custom template usage for rendering breadcrumb items with custom styling
The hubBreadcrumbItem directive allows custom rendering of each element.
Código
Icons Breadcrumbs
Breadcrumbs - Iconos
Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.
Código
RTL Breadcrumbs
Breadcrumbs - RTL
Soporte para idiomas con lectura de derecha a izquierda (RTL).
Código
Truncation & Tooltip
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
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, Handbook downloads a file, and Docs 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 component declares its defaults on :host, so a token set on an ancestor never reaches it — put it on the <hub-breadcrumb> element or inside it.