API reference

Inputs

breadcrumbs$

Type: Observable<BreadcrumbItem[]>

Observable stream of breadcrumb items automatically generated from route data.

Outputs

No outputs documented yet.

Templates

hubBreadcrumbItem

Custom template for rendering individual breadcrumb items

Example:

CSS variables

Divider & Layout

Control divider appearance and overall layout structure

`--hub-breadcrumb-divider`

Type: string

Default:'/'

Character or symbol used as separator between breadcrumb items

Examples:

'>''→''•''|'

`--hub-breadcrumb-divider-color`

Type: color

Default:#6c757d

Color of the divider separator

Examples:

#666666var(--bs-secondary)rgba(0,0,0,0.5)

`--hub-breadcrumb-padding-x`

Type: length

Default:0

Horizontal padding around the entire breadcrumb component

Examples:

0.5rem1rem0.75rem

`--hub-breadcrumb-padding-y`

Type: length

Default:0

Vertical padding around the entire breadcrumb component

Examples:

0.25rem0.5rem0.75rem

Colors & Background

Customize colors and background appearance of breadcrumb elements

`--hub-breadcrumb-bg`

Type: color

Default:transparent

Background color of the breadcrumb container

Examples:

#f8f9fa#ffffffvar(--bs-light)

`--hub-breadcrumb-item-color`

Type: color

Default:#6c757d

Text color for non-active breadcrumb items (links)

Examples:

#495057var(--bs-secondary)#666666

`--hub-breadcrumb-item-active-color`

Type: color

Default:#212529

Text color for the active (current) breadcrumb item

Examples:

#000000var(--bs-dark)#333333

`--hub-breadcrumb-item-hover-color`

Type: color

Default:#0d6efd

Text color when hovering over breadcrumb links

Examples:

#0056b3var(--bs-primary)#007bff

Spacing & Typography

Control spacing between items and typography settings

`--hub-breadcrumb-item-padding-x`

Type: length

Default:0.5rem

Horizontal padding around individual breadcrumb items

Examples:

0.25rem0.75rem1rem

`--hub-breadcrumb-item-padding-y`

Type: length

Default:0

Vertical padding around individual breadcrumb items

Examples:

0.25rem0.5rem0.75rem

`--hub-breadcrumb-font-size`

Type: length

Default:1rem

Font size for breadcrumb text

Examples:

0.875rem1.125rem1.25rem

`--hub-breadcrumb-font-weight`

Type: string

Default:400

Font weight for breadcrumb text

Examples:

500600bold

Border & Visual Effects

Configure borders, radius, and visual enhancements

`--hub-breadcrumb-border-radius`

Type: length

Default:0

Border radius for the breadcrumb container

Examples:

0.25rem0.375rem0.5rem

`--hub-breadcrumb-border`

Type: border

Default:none

Border around the breadcrumb container

Examples:

1px solid #dee2e62px solid #e9ecefnone

`--hub-breadcrumb-margin-bottom`

Type: length

Default:1rem

Bottom margin for the breadcrumb component

Examples:

0.5rem1.5rem2rem

RTL Support

Variables for right-to-left layout support

`--hub-breadcrumb-rtl-divider`

Type: string

Default:''

Divider character used in RTL layouts (reversed direction)

Examples:

'<''←'''

`--hub-breadcrumb-direction`

Type: string

Default:ltr

Text direction for breadcrumb layout

Examples:

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

Custom Divider

Custom Colors (via CSS class)

Spacing & Radius

Código

Template

Component

Code

Import:

Template:

Component:

Items are generated from the data.breadcrumb configuration of active routes.

Código

The last item uses the template "Dynamic: {name}" and is resolved with route data.

Código

Template

Routing Configuration

The hubBreadcrumbItem directive allows custom rendering of each element.