Breadcrumbs componentAvailable since EcoComposer 1.0

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>
^