<nav class="ecl-category-filter" data-ecl-category-filter="" data-ecl-auto-init="CategoryFilter">
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-1">
Item 1
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children">
Item 2 label
<svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2 ecl-category-filter__item--has-children"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#solid-arrow"></use>
</svg> Item 2.1
</a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 2.1.1
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3 ecl-category-filter__item--has-children"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#solid-arrow"></use>
</svg> Item 2.1.2
</a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 2.1.2 a
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 2.1.2 b
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 2.1.2 c
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 2.1.3
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 2.1.4
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.2
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.3
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.4
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.5
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.6
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 2.7
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children">
Item 3 with a very long label
<svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2 ecl-category-filter__item--has-children"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#solid-arrow"></use>
</svg> Item 3.1
</a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 3.1.1
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3 ecl-category-filter__item--has-children"><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#solid-arrow"></use>
</svg> Item 3.1.2
</a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 3.1.2 a
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 3.1.2 b
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-4">
Item 3.1.2 c
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 3.1.3
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-3">
Item 3.1.4
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 3.2
</a></li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 3.3
</a></li>
</ul>
</li>
<li class="ecl-category-filter__list-item" aria-expanded="false"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children">
Item 4 label
<svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-category-filter__item-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></a>
<ul class="ecl-category-filter__list">
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.1
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.2
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.3 with a very long label going on 2 lines
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.4
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.5
</a></li>
<li class="ecl-category-filter__list-item"><a href="/example"
class="ecl-category-filter__item ecl-category-filter__item--level-2">
Item 4.6
</a></li>
</ul>
</li>
</ul>
</nav>Try it yourself on the playground
Playground