Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs
Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.
Last updated Aug 29, 2026
Overview
Why teams search for this library
Use these Angular breadcrumbs when route context matters and you need a navigation aid that works with the Angular Router, templates and structured navigation paths.
Install
npm install ng-hub-ui-breadcrumbsJump to
Ideal for
- documentation sites
- admin panels
- multi-level apps
- route-aware navigation
About breadcrumbs
ng-hub-ui-breadcrumbs gives Angular applications a route-aware breadcrumb component for admin panels, documentation sites and multi-level products. It is useful when navigation depth grows and users need more orientation than a back button can provide.
Feature guides
Core Features
Essential breadcrumb functionality with automatic route detection and navigation path display.
Examples:
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.
Code
Code
Import:
Template:
Component:
Destinations Beyond the Router
Crumbs that point outside the Angular application, or at a file to download, rendered as plain anchors.
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.
Code
Import:
Template:
Component:
Dynamic Content
Dynamic breadcrumb content resolution from route data and resolvers with placeholder support.
Examples:
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.
Code
Code
Import:
Template:
Component:
Templates & Customization
Rich customization options with custom templates for breadcrumb items and enhanced styling.
Examples:
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.
Code
Code
Import:
Template:
Component:
Advanced Features
Enhanced functionality including icon support, RTL layout compatibility, collapsing for long trails and a tokenized keyboard focus ring.
Examples:
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.
Code
Code
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).
Code
Code
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.
Code
Code
Import:
Template:
Component:
Collapsing Long Trails
Fold the middle of a deep trail behind an indicator button that expands it in place.
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.
Code
Import:
Template:
Component:
Keyboard Focus Ring
The design-system focus ring on links and on the collapsed indicator, re-tintable through CSS variables.
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.
Code
Import:
Template:
Component:
Key features
Recent changes
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).