Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs

Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

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.

Code

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.

Code

Custom Templates

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Code

Icons Breadcrumbs

Breadcrumbs - Iconos

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

Code

RTL Breadcrumbs

Breadcrumbs - RTL

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

Code

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.

Code

Collapsing Long Trails

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.

Destinations Beyond the 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.

Keyboard Focus Ring

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.