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.

Última actualización 29 ago 2026

Visión General

Por qué los equipos buscan esta librería

Usa estos breadcrumbs para Angular cuando el contexto de ruta importe y necesites una ayuda de navegación que funcione con Angular Router, plantillas y rutas jerárquicas.

Instalación

npm install ng-hub-ui-breadcrumbs

Ir a

Ideal para

  • sitios de documentación
  • paneles de administración
  • apps multinivel
  • navegación sensible a la ruta

Sobre breadcrumbs

ng-hub-ui-breadcrumbs aporta a las aplicaciones Angular un componente breadcrumb sensible a la ruta para paneles de administración, sitios de documentación y productos con varios niveles. Resulta útil cuando la navegación crece y el usuario necesita más orientación que un simple botón atrás.

Guías de uso

Funcionalidades principales

Funcionalidad esencial de breadcrumbs con detección automática de rutas y visualización de la ruta de navegación.

Ejemplos:
Basic Breadcrumbs

Simple breadcrumbs displaying navigation path from route configuration

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

Código
Import:
Template:
Component:
Destinos fuera del router

Migas que apuntan fuera de la aplicación Angular, o a un archivo descargable, representadas como enlaces simples.

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.

Código
Import:
Template:
Component:

Contenido dinámico

Resolución dinámica del contenido de los breadcrumbs a partir de los datos de ruta y los resolvers, con soporte para marcadores de posición.

Ejemplos:
Dynamic Breadcrumbs

Breadcrumbs with dynamic content from route resolvers and data

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

Código
Import:
Template:
Component:

Plantillas y personalización

Amplias opciones de personalización con plantillas personalizadas para los elementos de los breadcrumbs y un estilo mejorado.

Ejemplos:
Custom Templates

Custom breadcrumb item templates with enhanced styling and icons

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Código

Código
Import:
Template:
Component:

Funcionalidades avanzadas

Funcionalidad mejorada que incluye soporte de iconos, compatibilidad con disposición RTL, colapso de rutas largas y un anillo de foco de teclado tokenizado.

Ejemplos:
Icons Breadcrumbs

Breadcrumb items with custom icons rendered from route data using custom templates

Breadcrumbs - Iconos

Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.

Código

Código
Import:
Template:
Component:
RTL Breadcrumbs

Right-to-left layout support with automatic divider flipping for international applications

Breadcrumbs - RTL

Soporte para idiomas con lectura de derecha a izquierda (RTL).

Código

Código
Import:
Template:
Component:
Truncation & Tooltip

Clip long breadcrumb labels with an ellipsis and reveal the full text on hover

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

Código
Import:
Template:
Component:
Colapso de rutas largas

Pliega el centro de una ruta profunda tras un botón indicador que la expande en el sitio.

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.

Código
Import:
Template:
Component:
Anillo de foco de teclado

El anillo de foco del sistema de diseño en los enlaces y en el indicador colapsado, retintable mediante variables CSS.

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.

Código
Import:
Template:
Component:

Características clave

Cambios recientes

Version 22.5.0 - 8/29/26, 12:00 AM

added: Collapsing for long trails: `maxItems`, `itemsBeforeCollapse` and `itemsAfterCollapse` fold the middle behind an indicator button that expands in place and emits `collapsedClick`.

added: Crumbs can point outside the router: `href`, `target`, `rel` and `download` on `BreadcrumbItem`, accepted both from the new object form of `data.breadcrumb` and from the new `items` input. A `_blank` crumb defaults to `rel="noopener noreferrer"`.

added: Keyboard focus ring on links and on the collapsed indicator, built on the design-system focus tokens and exposed as `--hub-breadcrumb-focus-*` / `--hub-breadcrumb-link-focus-color`.

changed: `BreadcrumbItem` and `BreadcrumbTemplateContext` are now exported from the public API, and `BreadcrumbItem.data` became optional.

Version 22.4.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.4.1 - 7/28/26, 12:00 AM

fixed: The active (last) crumb now declares aria-current=page so assistive technology announces the current position.

Version 22.3.0 - 6/29/26, 12:00 AM

added: Opt-in per-item truncation via the `truncateItems` input + `--hub-breadcrumb-max-item-width`.

added: `HubBreadcrumbLabelDirective` showing a tooltip only when a label overflows.

added: Optional hub-ui tooltip integration via `provideHubBreadcrumbTooltip(hubTooltipAdapter)` (native `title` fallback).

Librerías relacionadas

ng-hub-ui-nav ng-hub-ui-utils ng-hub-ui-portal