Breadcrumb - Navigation

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.
Fullscreen
<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--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
      </svg></li>
    <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis
      aria-hidden="true"><button class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
        data-ecl-breadcrumb-ellipsis-button aria-label="Show more breadcrumb items">…</button><svg
        class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.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">Parent Page label</a><svg
        class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.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">Parent Page label</a><svg
        class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.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">Parent Page label</a><svg
        class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.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">Parent Page label</a><svg
        class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true" role="presentation">
        <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
      </svg></li>
    <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
      aria-current="page">Current Page Label</li>
  </ol>
</nav>
Try it yourself on the playground
Playground