Information
<nav class="ecl-tabs" data-ecl-tabs="true" data-ecl-auto-init="Tabs">
<div class="ecl-tabs__container">
<ul class="ecl-tabs__list" role="tablist">
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
aria-selected="false">Item 1 label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
tabindex="-1" aria-selected="false">Item 2 label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
tabindex="-1" aria-selected="false">Item 3 label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example"
class="ecl-link ecl-tabs__link ecl-tabs__link--active" role="tab" tabindex="-1" aria-selected="true">Item 4
label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
tabindex="-1" aria-selected="false">Item 5 label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
tabindex="-1" aria-selected="false">Item 6 with a very long label</a></li>
<li class="ecl-tabs__item" role="presentation"><a href="/example" class="ecl-link ecl-tabs__link" role="tab"
tabindex="-1" aria-selected="false">Item 7 label</a></li>
<li class="ecl-tabs__item ecl-tabs__item--more" role="presentation"><button
class="ecl-button ecl-button--secondary ecl-tabs__toggle" type="button" tabindex="-1"><span
class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">More (%d)</span><svg
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.16df4a0c.svg#corner-arrow"></use>
</svg></span></button></li>
</ul>
</div>
<div class="ecl-tabs__controls"><button class="ecl-tabs__prev" aria-hidden="true"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-icon--inverted ecl-u-d-block" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only"></span></button><button class="ecl-tabs__next" aria-hidden="true"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-icon--inverted ecl-u-d-block" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only"></span></button></div>
</nav>Try it yourself on the playground
Playground