Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs
Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.
Last updated Aug 17, 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:
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 and RTL layout compatibility for international applications.
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:
Key features
Recent changes
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).