Simple breadcrumb
Core
<nav class="ecl-breadcrumb-core" aria-label="You are here:" data-ecl-breadcrumb-core="true">
<ol class="ecl-breadcrumb-core__container">
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Home</a><svg focusable="false"
aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">About the European
Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" aria-current="page"
data-ecl-breadcrumb-core-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundStandardised
<nav class="ecl-breadcrumb-standardised" aria-label="You are here:" data-ecl-breadcrumb-standardised="true">
<ol class="ecl-breadcrumb-standardised__container">
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">
<a href="/example" class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">Home</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">
<a href="/example" class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">About the European
Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page" aria-current="page"
data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundHarmonised
<nav class="ecl-breadcrumb-harmonised" aria-label="You are here:" data-ecl-breadcrumb-harmonised="true">
<ol class="ecl-breadcrumb-harmonised__container">
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">Home</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">About the European
Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__current-page" aria-current="page"
data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundLong breadcrumb
When there are more than 3 items, the breadcrumb should be collapsed by default and items should be displayed if there's enough space.
The first item and the last 2 items should always be visible.
Core
<nav data-ecl-auto-init="BreadcrumbCore" class="ecl-breadcrumb-core" aria-label="You are here:"
data-ecl-breadcrumb-core="true">
<ol class="ecl-breadcrumb-core__container">
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Home</a><svg focusable="false"
aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis" aria-hidden="false"
data-ecl-breadcrumb-core-ellipsis="true"><button type="button" class="ecl-breadcrumb-core__ellipsis"
aria-label="Click to expand" data-ecl-breadcrumb-core-ellipsis-button="true">…</button><svg focusable="false"
aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">About the European
Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="true"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Organisational structure</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">How the Commission is
organised</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" aria-current="page"
data-ecl-breadcrumb-core-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundStandardised
<nav data-ecl-auto-init="BreadcrumbStandardised" class="ecl-breadcrumb-standardised" aria-label="You are here:"
data-ecl-breadcrumb-standardised="true">
<ol class="ecl-breadcrumb-standardised__container">
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">
<a href="/example" class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">Home</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis" aria-hidden="false"
data-ecl-breadcrumb-standardised-ellipsis="true"><button type="button"
class="ecl-breadcrumb-standardised__ellipsis" aria-label="Click to expand"
data-ecl-breadcrumb-standardised-ellipsis-button="true">…</button><svg focusable="false" aria-hidden="true"
role="presentation" class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"
aria-hidden="false"><a href="/example"
class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">About the European Commission</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"
aria-hidden="true"><a href="/example"
class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">Organisational structure</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">
<a href="/example" class="ecl-breadcrumb-standardised__link ecl-link ecl-link--standalone">How the Commission is
organised</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-standardised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page" aria-current="page"
data-ecl-breadcrumb-standardised-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundHarmonised
<nav data-ecl-auto-init="BreadcrumbHarmonised" class="ecl-breadcrumb-harmonised" aria-label="You are here:"
data-ecl-breadcrumb-harmonised="true">
<ol class="ecl-breadcrumb-harmonised__container">
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">Home</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__segment--ellipsis" aria-hidden="false"
data-ecl-breadcrumb-harmonised-ellipsis="true"><button type="button" class="ecl-breadcrumb-harmonised__ellipsis"
aria-label="Click to expand" data-ecl-breadcrumb-harmonised-ellipsis-button="true">…</button><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="expandable" aria-hidden="false">
<a href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">About the European
Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="expandable" aria-hidden="true">
<a href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">Organisational
structure</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false"><a
href="/example" class="ecl-breadcrumb-harmonised__link ecl-link ecl-link--standalone">How the Commission is
organised</a><svg focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb-harmonised__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__current-page" aria-current="page"
data-ecl-breadcrumb-harmonised-item="static" aria-hidden="false">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundJS behaviour
Auto initialisation
In order to automatically initalise the JS behaviour, add data-ecl-auto-init="BreadcrumbCore" (or BreadcrumbStandardised, or BreadcrumbHarmonised) to your component's markup:
<nav
class="ecl-breadcrumb"
aria-label="You are here:"
data-ecl-breadcrumb-core
data-ecl-auto-init="BreadcrumbCore"
>
...
</nav>
Don't forget to call ECL.autoInit() when your page is ready!
Manual initialisation
When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-breadcrumb-core]') if you only have 1 breadcrumb in the page.
Then, instantiate the BreadcrumbCore (or BreadcrumbStandardised, or BreadcrumbHarmonised) component and call init():
var elt = document.querySelector('[data-ecl-breadcrumb-core]');
var breadcrumb = new ECL.BreadcrumbCore(elt);
breadcrumb.init();