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>