Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs

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

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-breadcrumbs

Jump 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.

Código

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.

Código

Template

Routing Configuration

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.

Código

Template

Component

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.

Código

Template

Component

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).

Código

Template

Component

Code
Import:
Template:
Component:

Key features

Angular Router aware

Generate breadcrumb trails from route structure without maintaining manual labels on every page.

Custom rendering

Replace separators and item templates to match product navigation patterns and brand styles.

Works in complex layouts

Helpful for back offices, knowledge bases and nested application shells.

Recent changes

Version 20.0.2 - 9/17/24, 12:00 AM

added: Comprehensive documentation page with functional examples

added: Basic breadcrumbs example with automatic route detection

added: Dynamic breadcrumbs example with placeholder resolution from route data

added: Custom templates example with enhanced styling and icons

added: Icons breadcrumbs example with visual indicators

added: RTL support example for right-to-left layouts

added: CSS variables styling example with complete theming options

added: Live functional examples in documentation with syntax highlighting

changed: Updated documentation structure with dedicated overview, API, and examples sections

changed: Enhanced code examples with proper TypeScript and HTML highlighting

changed: Improved example organization by functionality categories

Version 20.0.1 - 3/20/24, 12:00 AM

added: Full Angular 21 compatibility

added: Enhanced automatic route detection

added: Improved Bootstrap 5 styling compatibility

fixed: Performance optimizations for route data resolution

changed: Comprehensive README documentation

Version 20.0.0 - 1/15/24, 12:00 AM

changed: Migrated to Angular 21 with standalone components

added: Automatic breadcrumb generation from route configuration

added: Custom template support with hubBreadcrumbItem directive

added: Dynamic content resolution from route resolvers

added: RTL layout support for international applications

added: CSS custom properties for complete theming control

Related libraries

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

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

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

Template

Routing Configuration

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

Código

Template

Component

Breadcrumbs - Iconos

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

Código

Template

Component

Breadcrumbs - RTL

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

Código

Template

Component

Breadcrumbs - CSS Variables Styling

Customization of dividers, colors, and spacing through CSS variables

Custom Colors (via CSS class)

Código

Template

Component