Breadcrumbs componentAvailable since EcoComposer 1.0

The default one :

A styled one :

The defaults values are :

'breadcrumbs--color' : 'breadcrumbs--color',
'breadcrumbs--font-family' : theming.$-font-family,
'breadcrumbs--link--color' : 'breadcrumbs--link--color',
'breadcrumbs--link--hover--color' : 'breadcrumbs--link--hover--color',
'font-size' : 2.4rem * theming.$font-size,
'print' : false,
'suffix' : '',
'themes' :  (
  'light' : (
    'default--breadcrumbs--color' : #000,
    'default--breadcrumbs--link--color' : #066,
    'default--breadcrumbs--link--hover--color'  : #0052f5
  ),
  'dark' : (
    'default--breadcrumbs--color' : #ddd,
    'default--breadcrumbs--font-family' : #000,
    'default--breadcrumbs--link--color' : #0cc,
    'default--breadcrumbs--link--hover--color'  : #0ff
  )
)

We can implement it that way :

@include breadcrumbs.init();
@include breadcrumbs.create();
@include breadcrumbs.create(
  (
    'themes' : $themes,
    'suffix' : '-2'
  )
);

We can implement it that way :

<nav class="breadcrumbs--block suffix"><!-- --><a href=# class="breadcrumbs--block--link suffix">A link</a><!-- --><span class="breadcrumbs--delimiter suffix">></span><!-- --><a href=# class="breadcrumbs--block--link suffix">Another link</a><!-- --><span class="breadcrumbs--delimiter suffix">></span><!-- --><p class="breadcrumbs--item suffix breadcrumbs--active-page">A text</span><!-- --></nav>