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"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" data-ecl-breadcrumb-core-item="static"
aria-current="page">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"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
data-ecl-breadcrumb-standardised-item="static" aria-current="page">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"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__current-page"
data-ecl-breadcrumb-harmonised-item="static" aria-current="page">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 class="ecl-breadcrumb-core" aria-label="You are here:" data-ecl-breadcrumb-core="true"
data-ecl-auto-init="BreadcrumbCore">
<ol class="ecl-breadcrumb-core__container">
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis"
data-ecl-breadcrumb-core-ellipsis=""><button class="ecl-button ecl-button--ghost ecl-breadcrumb-core__ellipsis"
type="button" data-ecl-breadcrumb-core-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-core__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" data-ecl-breadcrumb-core-item="static"
aria-current="page">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"
data-ecl-auto-init="BreadcrumbStandardised">
<ol class="ecl-breadcrumb-standardised__container">
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis"
data-ecl-breadcrumb-standardised-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb-standardised__ellipsis" type="button"
data-ecl-breadcrumb-standardised-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-standardised__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
data-ecl-breadcrumb-standardised-item="static" aria-current="page">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"
data-ecl-auto-init="BreadcrumbHarmonised">
<ol class="ecl-breadcrumb-harmonised__container">
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__segment--ellipsis"
data-ecl-breadcrumb-harmonised-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb-harmonised__ellipsis" type="button"
data-ecl-breadcrumb-harmonised-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment" data-ecl-breadcrumb-harmonised-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb-harmonised__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb-harmonised__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb-harmonised__segment ecl-breadcrumb-harmonised__current-page"
data-ecl-breadcrumb-harmonised-item="static" aria-current="page">News</li>
</ol>
</nav>Try it yourself on the playground
Playground