Componente Breadcrumbs para Angular | ng-hub-ui-breadcrumbs

Componente breadcrumbs para Angular con integración con Router, plantillas personalizadas, soporte RTL y tokens de estilo flexibles.

Referencia API

Inputs

breadcrumbs$

Tipo: Observable<BreadcrumbItem[]>

Observable stream of breadcrumb items automatically generated from route data.

Outputs

Todavía no hay outputs documentados.

Templates

hubBreadcrumbItem

Custom template for rendering individual breadcrumb items

Ejemplo:

Variables CSS

Divider & Layout

Control divider appearance and overall layout structure

--hub-breadcrumb-divider

Tipo: string

Por defecto:'/'

Character or symbol used as separator between breadcrumb items

Ejemplos:
'>''→''•''|'
--hub-breadcrumb-divider-color

Tipo: color

Por defecto:#6c757d

Color of the divider separator

Ejemplos:
#666666var(--bs-secondary)rgba(0,0,0,0.5)
--hub-breadcrumb-padding-x

Tipo: length

Por defecto:0

Horizontal padding around the entire breadcrumb component

Ejemplos:
0.5rem1rem0.75rem
--hub-breadcrumb-padding-y

Tipo: length

Por defecto:0

Vertical padding around the entire breadcrumb component

Ejemplos:
0.25rem0.5rem0.75rem

Colors & Background

Customize colors and background appearance of breadcrumb elements

--hub-breadcrumb-bg

Tipo: color

Por defecto:transparent

Background color of the breadcrumb container

Ejemplos:
#f8f9fa#ffffffvar(--bs-light)
--hub-breadcrumb-item-color

Tipo: color

Por defecto:#6c757d

Text color for non-active breadcrumb items (links)

Ejemplos:
#495057var(--bs-secondary)#666666
--hub-breadcrumb-item-active-color

Tipo: color

Por defecto:#212529

Text color for the active (current) breadcrumb item

Ejemplos:
#000000var(--bs-dark)#333333
--hub-breadcrumb-item-hover-color

Tipo: color

Por defecto:#0d6efd

Text color when hovering over breadcrumb links

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

Spacing & Typography

Control spacing between items and typography settings

--hub-breadcrumb-item-padding-x

Tipo: length

Por defecto:0.5rem

Horizontal padding around individual breadcrumb items

Ejemplos:
0.25rem0.75rem1rem
--hub-breadcrumb-item-padding-y

Tipo: length

Por defecto:0

Vertical padding around individual breadcrumb items

Ejemplos:
0.25rem0.5rem0.75rem
--hub-breadcrumb-font-size

Tipo: length

Por defecto:1rem

Font size for breadcrumb text

Ejemplos:
0.875rem1.125rem1.25rem
--hub-breadcrumb-font-weight

Tipo: string

Por defecto:400

Font weight for breadcrumb text

Ejemplos:
500600bold

Border & Visual Effects

Configure borders, radius, and visual enhancements

--hub-breadcrumb-border-radius

Tipo: length

Por defecto:0

Border radius for the breadcrumb container

Ejemplos:
0.25rem0.375rem0.5rem
--hub-breadcrumb-border

Tipo: border

Por defecto:none

Border around the breadcrumb container

Ejemplos:
1px solid #dee2e62px solid #e9ecefnone
--hub-breadcrumb-margin-bottom

Tipo: length

Por defecto:1rem

Bottom margin for the breadcrumb component

Ejemplos:
0.5rem1.5rem2rem

RTL Support

Variables for right-to-left layout support

--hub-breadcrumb-rtl-divider

Tipo: string

Por defecto:''

Divider character used in RTL layouts (reversed direction)

Ejemplos:
'<''←'''
--hub-breadcrumb-direction

Tipo: string

Por defecto:ltr

Text direction for breadcrumb layout

Ejemplos:
rtlltr

Estilos y theming

CSS Variables & Theming

Complete theming control using CSS custom properties for dividers, colors, spacing, and visual appearance.

Ejemplos:

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 Colors (via CSS class)

Código

Template

Component

Código
Import:
Template:
Component:

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