Angular Breadcrumbs Component | ng-hub-ui-breadcrumbs
Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.
Styles
Mixins and styles
Override any of the `--hub-breadcrumb-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-breadcrumb-theme
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-breadcrumb-theme() | $bg--hub-breadcrumb-bg$color--hub-breadcrumb-color$border-radius--hub-breadcrumb-border-radius$padding-x--hub-breadcrumb-padding-x$padding-y--hub-breadcrumb-padding-y$margin-bottom--hub-breadcrumb-margin-bottom$font-size--hub-breadcrumb-font-size$divider--hub-breadcrumb-divider$divider-flipped--hub-breadcrumb-divider-flipped$divider-color--hub-breadcrumb-divider-color$item-padding-x--hub-breadcrumb-item-padding-x$item-active-color--hub-breadcrumb-item-active-color$accent--hub-breadcrumb-accent$link-color--hub-breadcrumb-link-color$link-hover-color--hub-breadcrumb-link-hover-color$link-decoration--hub-breadcrumb-link-decoration$link-hover-decoration--hub-breadcrumb-link-hover-decoration | One-call theming for `<hub-breadcrumb>` |
CSS variables
Theme every pixel with 27 CSS variables. Override them at :root or scope them to a wrapper.
Breadcrumbs
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-breadcrumb-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding around the entire breadcrumb component |
--hub-breadcrumb-padding-y | 0.25rem | length | Vertical padding around the entire breadcrumb component |
--hub-breadcrumb-margin-bottom | var(--hub-ref-space-0, 0) | length | Bottom margin for the breadcrumb component |
--hub-breadcrumb-bg | var(--hub-sys-surface-page, transparent) | color | Background color of the breadcrumb container |
--hub-breadcrumb-color | var(--hub-sys-text-primary, #212529) | color | Base text color of the breadcrumb list |
--hub-breadcrumb-font-size | inherit | length | Font size for breadcrumb text |
--hub-breadcrumb-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Border radius for the breadcrumb container |
--hub-breadcrumb-divider-color | var(--hub-sys-text-muted, #6c757d) | color | Color of the divider separator |
--hub-breadcrumb-divider | '>' | string | Character or symbol used as separator between breadcrumb items |
--hub-breadcrumb-divider-flipped | '<' | string | Divider character used in RTL layouts (reversed direction) |
--hub-breadcrumb-item-padding-x | var(--hub-ref-space-1, 0.25rem) | length | Horizontal padding around individual breadcrumb items |
--hub-breadcrumb-item-active-color | var(--hub-sys-text-muted, #6c757d) | color | Text color for the active (current) breadcrumb item |
--hub-breadcrumb-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent for the links — re-based per variant (default = link colour) |
--hub-breadcrumb-link-color | var(--hub-breadcrumb-accent) | color | Text color for non-active breadcrumb items (links) |
--hub-breadcrumb-link-hover-color | var(--hub-breadcrumb-accent-emphasis, var(--hub-sys-link-hover-color, #0a58ca)) | color | Text color when hovering over breadcrumb links |
--hub-breadcrumb-link-decoration | none | string | Text decoration of breadcrumb links |
--hub-breadcrumb-link-hover-decoration | underline | string | Text decoration of breadcrumb links on hover |
--hub-breadcrumb-max-item-width | 12rem | length | Maximum width of a single label when truncation is enabled. |
--hub-breadcrumb-link-focus-color | var(--hub-breadcrumb-accent-emphasis) | color | Text color of a link, or of the collapsed indicator, while it holds keyboard focus |
--hub-breadcrumb-focus-bg | transparent | color | Background behind a link while it holds keyboard focus |
--hub-breadcrumb-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Width of the keyboard focus ring |
--hub-breadcrumb-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Color of the keyboard focus ring |
--hub-breadcrumb-focus-ring-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Corner radius the keyboard focus ring is drawn with |
--hub-breadcrumb-collapsed-color | var(--hub-sys-text-muted, #6c757d) | color | Text color of the collapsed indicator (the … button shown when maxItems folds the trail) |
--hub-breadcrumb-collapsed-hover-color | var(--hub-breadcrumb-accent) | color | Text color of the collapsed indicator on hover |
--hub-breadcrumb-collapsed-bg | transparent | color | Background of the collapsed indicator |
--hub-breadcrumb-collapsed-hover-bg | var(--hub-breadcrumb-accent-subtle) | color | Background of the collapsed indicator on hover |
Styling and theming
CSS Variables & Theming
Complete theming control using CSS custom properties for dividers, colors, spacing, and visual appearance.
Examples:
CSS Variables Customization
Divider, colours, spacing and radius, all through CSS custom properties.
CSS Variables Customization
Divider, colours, spacing and radius, all through CSS custom properties.
Custom Divider
Custom Colors (via CSS class)
Spacing & Radius
Code
Code
Import:
Template:
Component: