Category filter

<nav class="ecl-category-filter" data-ecl-category-filter data-ecl-auto-init="CategoryFilter"
  aria-label="Category filter">
  <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" aria-current="true">Item 1</a></li>
    <li class="ecl-category-filter__list-item"><button
        class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children"
        aria-expanded="false" aria-controls="unique-id-2">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.e3d8f25c.svg#corner-arrow"></use>
        </svg></button>
      <ul class="ecl-category-filter__list" id="unique-id-2">
        <li class="ecl-category-filter__list-item"><button
            class="ecl-category-filter__item ecl-category-filter__item--level-2 ecl-category-filter__item--has-children"
            aria-expanded="false" aria-controls="unique-id-2-1"><svg
              class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#solid-arrow"></use>
            </svg>Item 2.1</button>
          <ul class="ecl-category-filter__list" id="unique-id-2-1">
            <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"><button
                class="ecl-category-filter__item ecl-category-filter__item--level-3 ecl-category-filter__item--has-children"
                aria-expanded="false" aria-controls="unique-id-2-1-2"><svg
                  class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
                  aria-hidden="true">
                  <use xlink:href="/dist/media/icons.e3d8f25c.svg#solid-arrow"></use>
                </svg>Item 2.1.2</button>
              <ul class="ecl-category-filter__list" id="unique-id-2-1-2">
                <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"><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"><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"><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"><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"><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"><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"><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"><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"><button
        class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children"
        aria-expanded="false" aria-controls="unique-id-3">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.e3d8f25c.svg#corner-arrow"></use>
        </svg></button>
      <ul class="ecl-category-filter__list" id="unique-id-3">
        <li class="ecl-category-filter__list-item"><button
            class="ecl-category-filter__item ecl-category-filter__item--level-2 ecl-category-filter__item--has-children"
            aria-expanded="false" aria-controls="unique-id-3-1"><svg
              class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#solid-arrow"></use>
            </svg>Item 3.1</button>
          <ul class="ecl-category-filter__list" id="unique-id-3-1">
            <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"><button
                class="ecl-category-filter__item ecl-category-filter__item--level-3 ecl-category-filter__item--has-children"
                aria-expanded="false" aria-controls="unique-id-3-1-2"><svg
                  class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-category-filter__item-icon" focusable="false"
                  aria-hidden="true">
                  <use xlink:href="/dist/media/icons.e3d8f25c.svg#solid-arrow"></use>
                </svg>Item 3.1.2</button>
              <ul class="ecl-category-filter__list" id="unique-id-3-1-2">
                <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"><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"><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"><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"><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"><button
        class="ecl-category-filter__item ecl-category-filter__item--level-1 ecl-category-filter__item--has-children"
        aria-expanded="false" aria-controls="unique-id-4">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.e3d8f25c.svg#corner-arrow"></use>
        </svg></button>
      <ul class="ecl-category-filter__list" id="unique-id-4">
        <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>