Breadcrumbs componentAvailable since EcoComposer 1.0

Breadcrumbs examples
Default SCSS values
SCSS implementation
HTML implementation

The default one :

A styled one :

The default 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>