Long 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 ecl-breadcrumb--negative" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link ecl-link--negative">Home</a><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link ecl-link--negative">About the
European Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link ecl-link--negative">Organisational
structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link ecl-link--negative">How the
Commission is organised</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundStandardised
<nav class="ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true" data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational structure</a><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Commission is
organised</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>Try it yourself on the playground
PlaygroundHarmonised
<nav class="ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true" data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational structure</a><svg
class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Commission is
organised</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>Try it yourself on the playground
Playground