Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs
Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.
API reference
Here's the full contract for breadcrumbs: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial breadcrumbs in with 1 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
breadcrumbs$ | Observable<BreadcrumbItem[]> | — | Observable stream of breadcrumb items automatically generated from route data. |
Outputs
No outputs documented yet.
Templates
Make it yours — 1 template slots let you project custom markup.
| Name | Description | Example |
|---|---|---|
hubBreadcrumbItem | Custom template for rendering individual breadcrumb items | <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
@if (!isLast) {
<a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a>
} @else {
<span class="breadcrumb-current">{{ item.label }}</span>
}
</ng-template> |
CSS variables
Theme every pixel with 17 CSS variables. Override them at :root or scope them to a wrapper.
Divider & Layout
Control divider appearance and overall layout structure
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-divider | '/' | string | Character or symbol used as separator between breadcrumb items '>''→''•''|' |
--hub-breadcrumb-divider-color | #6c757d | color | Color of the divider separator #666666var(--bs-secondary)rgba(0,0,0,0.5) |
--hub-breadcrumb-padding-x | 0 | length | Horizontal padding around the entire breadcrumb component 0.5rem1rem0.75rem |
--hub-breadcrumb-padding-y | 0 | length | Vertical padding around the entire breadcrumb component 0.25rem0.5rem0.75rem |
Colors & Background
Customize colors and background appearance of breadcrumb elements
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-bg | transparent | color | Background color of the breadcrumb container #f8f9fa#ffffffvar(--bs-light) |
--hub-breadcrumb-item-color | #6c757d | color | Text color for non-active breadcrumb items (links) #495057var(--bs-secondary)#666666 |
--hub-breadcrumb-item-active-color | #212529 | color | Text color for the active (current) breadcrumb item #000000var(--bs-dark)#333333 |
--hub-breadcrumb-item-hover-color | #0d6efd | color | Text color when hovering over breadcrumb links #0056b3var(--bs-primary)#007bff |
Spacing & Typography
Control spacing between items and typography settings
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-item-padding-x | 0.5rem | length | Horizontal padding around individual breadcrumb items 0.25rem0.75rem1rem |
--hub-breadcrumb-item-padding-y | 0 | length | Vertical padding around individual breadcrumb items 0.25rem0.5rem0.75rem |
--hub-breadcrumb-font-size | 1rem | length | Font size for breadcrumb text 0.875rem1.125rem1.25rem |
--hub-breadcrumb-font-weight | 400 | string | Font weight for breadcrumb text 500600bold |
Border & Visual Effects
Configure borders, radius, and visual enhancements
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-border-radius | 0 | length | Border radius for the breadcrumb container 0.25rem0.375rem0.5rem |
--hub-breadcrumb-border | none | border | Border around the breadcrumb container 1px solid #dee2e62px solid #e9ecefnone |
--hub-breadcrumb-margin-bottom | 1rem | length | Bottom margin for the breadcrumb component 0.5rem1.5rem2rem |
RTL Support
Variables for right-to-left layout support
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-rtl-divider | '' | string | Divider character used in RTL layouts (reversed direction) '<''←''' |
--hub-breadcrumb-direction | ltr | string | Text direction for breadcrumb layout rtlltr |
Styling and theming
CSS Variables & Theming
Complete theming control using CSS custom properties for dividers, colors, spacing, and visual appearance.
Examples:
CSS Variables Customization
Customize breadcrumbs appearance using CSS custom properties for complete theming
Breadcrumbs - CSS Variables Styling
Customization of dividers, colors, and spacing through CSS variables
Custom Divider
Custom Colors (via CSS class)
Spacing & Radius
Code
Code
Import:
Template:
Component: