Mega menu

<nav class="ecl-mega-menu" data-ecl-mega-menu data-ecl-auto-init="MegaMenu" data-ecl-mega-menu-label-open="Menu"
  data-ecl-mega-menu-label-close="Close" aria-expanded="false" role="navigation" id=demo>
  <div class="ecl-mega-menu__overlay"></div>
  <div class="ecl-container ecl-mega-menu__container"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-link--icon-only"
      data-ecl-mega-menu-open><svg class="ecl-icon ecl-icon--m ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#hamburger"></use>
      </svg><svg class="ecl-icon ecl-icon--m ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#close"></use>
      </svg><span class="ecl-link__label">Menu</span></a>
    <section class="ecl-mega-menu__inner" data-ecl-mega-menu-inner role="application" aria-label="ecl mega menu demo">
      <header class="ecl-mega-menu__inner-header"><button class="ecl-button ecl-button--ghost ecl-mega-menu__back"
          type="submit" data-ecl-mega-menu-back><span class="ecl-button__container"><svg
              class="ecl-icon ecl-icon--xs ecl-icon--rotate-270 ecl-button__icon" focusable="false" aria-hidden="true"
              data-ecl-icon>
              <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
            </svg><span class="ecl-button__label" data-ecl-label="true">Back</span></span></button></header>
      <ul class="ecl-mega-menu__list" data-ecl-menu-list>
        <li class="ecl-mega-menu__item" data-ecl-mega-menu-item id="ecl-mega-menu-item-demo-0"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__link" data-ecl-mega-menu-link
            id="ecl-mega-menu-item-demo-0-link">Home</a></li>
        <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
          aria-haspopup aria-expanded="false" aria-label="Access news and media children"
          data-ecl-parent-aria-label="Link to the News and media page" id="ecl-mega-menu-item-demo-1"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__link" data-ecl-mega-menu-link
            id="ecl-mega-menu-item-demo-1-link"><span class="ecl-link__label"
              id="ecl-mega-menu-item-demo-1-link-label">News and media</span><svg
              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
            </svg></a>
          <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
            <ul class="ecl-mega-menu__sublist">
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
                aria-label="Access item 2.1's children" data-ecl-parent-aria-label="Link to the 2.1 item's page"><a
                  href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
                    class="ecl-link__label">Item 2.1</span><svg
                    class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false"
                    aria-hidden="true">
                    <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
                  </svg></a>
                <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
                  <ul class="ecl-mega-menu__sublist">
                    <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.1 subitem 1</a></li>
                    <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
                          class="ecl-link__label">Item 2.1 subitem 2</span><svg
                          class="ecl-icon ecl-icon--2xs ecl-link__icon" focusable="false" aria-hidden="true">
                          <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
                        </svg></a></li>
                    <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.1 subitem 3</a></li>
                    <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.1 subitem 4</a></li>
                    <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.1 subitem 5</a></li>
                    <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
                        class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">View
                          all</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-link__icon"
                          focusable="false" aria-hidden="true">
                          <use xlink:href="/dist/media/icons.b6764719.svg#arrow-left"></use>
                        </svg></a></li>
                  </ul>
                  <div class="ecl-mega-menu__featured" data-ecl-mega-menu-featured><span
                      class="ecl-mega-menu__featured-title">featured column</span>
                    <div class="ecl-mega-menu__featured-scrollable">
                      <div class="ecl-mega-menu__featured-content">
                        <article class="ecl-navigation-list__item">
                          <picture class="ecl-picture ecl-navigation-list__picture"><img
                              class="ecl-navigation-list__image"
                              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
                              alt="Alt text for the image" /></picture>
                          <div class="ecl-content-block ecl-navigation-list__content-block"
                            data-ecl-auto-init="ContentBlock" data-ecl-content-block>
                            <div class="ecl-content-block__title" data-ecl-title-link><a href="/example#qspea"
                                class="ecl-link ecl-link--standalone">Title 1</a></div>
                            <div class="ecl-content-block__description">Lorem ipsum dolor sit amet, consectetur
                              adipiscing elit. Phasellus gravida ipsum ut lorem cursus</div>
                          </div>
                        </article>
                      </div>
                      <ul class="ecl-mega-menu__featured-list">
                        <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                            class="ecl-link ecl-link--standalone">Featured link 1</a></li>
                        <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                            class="ecl-link ecl-link--standalone">Featured link 2</a></li>
                        <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                            class="ecl-link ecl-link--standalone">Featured link 3</a></li>
                        <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                            class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">Featured
                              link 4</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon" focusable="false"
                              aria-hidden="true">
                              <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
                            </svg></a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
        </li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.2</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
          aria-label="Access item 2.3's children" data-ecl-parent-aria-label="Link to the 2.3 item page"><a
            href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
              class="ecl-link__label">Item 2.3 that has a very long label by no other mean that showing how after the
              third line the text will be trimmed, but not if the link is a categroy title.</span><svg
              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
            </svg></a>
          <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
            <ul class="ecl-mega-menu__sublist">
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.3 subitem 1</a></li>
              <li class="ecl-mega-menu__subitem ecl-mega-menu__subitem--current ecl-mega-menu__subitem--current-page"
                data-ecl-mega-menu-subitem aria-current="page"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.3 subitem 2</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.3 subitem 3</a></li>
            </ul>
          </div>
        </li>
        </li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.4</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.5</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 2.6</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
              class="ecl-link__label">Item 2.7</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon"
              focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
            </svg></a></li>
      </ul>
  </div>
  </li>
  <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
    aria-haspopup aria-expanded="false" aria-label="Access about the european commission's children"
    data-ecl-parent-aria-label="Link to About the European Commission page" id="ecl-mega-menu-item-demo-2"><a
      href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__link" data-ecl-mega-menu-link
      id="ecl-mega-menu-item-demo-2-link"><span class="ecl-link__label" id="ecl-mega-menu-item-demo-2-link-label">About
        the European Commission</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
      <ul class="ecl-mega-menu__sublist">
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 3.1</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 3.2</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 3.3</a></li>
      </ul>
    </div>
  </li>
  <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
    aria-haspopup aria-expanded="false" aria-label="Access key priorities' children"
    data-ecl-parent-aria-label="Link to Key priorities page" id="ecl-mega-menu-item-demo-3"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__link" data-ecl-mega-menu-link
      id="ecl-mega-menu-item-demo-3-link"><span class="ecl-link__label" id="ecl-mega-menu-item-demo-3-link-label">Key
        priorities</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
      <ul class="ecl-mega-menu__sublist">
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Aid, Development cooperation, Fundamental
            rights</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Energy, Climate change, Environment</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Law</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">EU regional and urban development</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
          aria-label="Access research and innovation's children"
          data-ecl-parent-aria-label="Link to research and innovation page"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
              class="ecl-link__label">Research and innovation</span><svg
              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
            </svg></a>
          <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
            <ul class="ecl-mega-menu__sublist">
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">How we provide aid</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Who we work with</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Get involved in EU humanitarian aid</a>
              </li>
              <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">View all</span><svg
                    class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-link__icon" focusable="false"
                    aria-hidden="true">
                    <use xlink:href="/dist/media/icons.b6764719.svg#arrow-left"></use>
                  </svg></a></li>
            </ul>
            <div class="ecl-mega-menu__featured" data-ecl-mega-menu-featured><span
                class="ecl-mega-menu__featured-title">featured column</span>
              <div class="ecl-mega-menu__featured-scrollable">
                <div class="ecl-mega-menu__featured-content">
                  <article class="ecl-navigation-list__item">
                    <picture class="ecl-picture ecl-navigation-list__picture"><img class="ecl-navigation-list__image"
                        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
                        alt="Alt text for the image" /></picture>
                    <div class="ecl-content-block ecl-navigation-list__content-block" data-ecl-auto-init="ContentBlock"
                      data-ecl-content-block>
                      <div class="ecl-content-block__title" data-ecl-title-link><a href="/example#qspea"
                          class="ecl-link ecl-link--standalone">Title 1</a></div>
                      <div class="ecl-content-block__description">Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Phasellus gravida ipsum ut lorem cursus</div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </li>
  </li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Food, Farming, Fisheries</a></li>
  </ul>
  </div>
  </li>
  <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
    aria-haspopup aria-expanded="false" aria-label="Access EU Policies' children"
    data-ecl-parent-aria-label="Link to the EU Policies page" id="ecl-mega-menu-item-demo-4"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__link" data-ecl-mega-menu-link
      id="ecl-mega-menu-item-demo-4-link"><span class="ecl-link__label" id="ecl-mega-menu-item-demo-4-link-label">EU
        Policies</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
      <ul class="ecl-mega-menu__sublist">
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
          aria-label="Access item 5.1's children" data-ecl-parent-aria-label="Link to the Item 5.1 page"><a
            href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
              class="ecl-link__label">Item 5.1</span><svg
              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
            </svg></a>
          <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
            <ul class="ecl-mega-menu__sublist">
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 1</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span
                    class="ecl-link__label">Item 5.1 subitem 2</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon"
                    focusable="false" aria-hidden="true">
                    <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
                  </svg></a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 3</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 4</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 5</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 6</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 7</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 8</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 9</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 10</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 11</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 12</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 13 </a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 14</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 15</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 16</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 17</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 18</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 19</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 20</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 21</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 22</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 23</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 24</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 25</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 26</a></li>
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.1 subitem 27</a></li>
              <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">View all</span><svg
                    class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-link__icon" focusable="false"
                    aria-hidden="true">
                    <use xlink:href="/dist/media/icons.b6764719.svg#arrow-left"></use>
                  </svg></a></li>
            </ul>
            <div class="ecl-mega-menu__featured" data-ecl-mega-menu-featured><span
                class="ecl-mega-menu__featured-title">featured column</span>
              <div class="ecl-mega-menu__featured-scrollable">
                <div class="ecl-mega-menu__featured-content">
                  <article class="ecl-navigation-list__item">
                    <picture class="ecl-picture ecl-navigation-list__picture"><img class="ecl-navigation-list__image"
                        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
                        alt="Alt text for the image" /></picture>
                    <div class="ecl-content-block ecl-navigation-list__content-block" data-ecl-auto-init="ContentBlock"
                      data-ecl-content-block>
                      <div class="ecl-content-block__title" data-ecl-title-link><a href="/example#qspea"
                          class="ecl-link ecl-link--standalone">Title 1</a></div>
                      <div class="ecl-content-block__description">Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Phasellus gravida ipsum ut lorem cursus</div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </li>
  </li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
    aria-label="Access item 5.2's children" data-ecl-parent-aria-label="Link to the Item 5.2 page"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span class="ecl-link__label">Item
        5.2</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
      <ul class="ecl-mega-menu__sublist">
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.2 subitem 1</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.2 subitem 2</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.2 subitem 3</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.2 subitem 4</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.2 subitem 5</a></li>
      </ul>
    </div>
  </li>
  </li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem aria-expanded="false"
    aria-label="Access item 5.3's children" data-ecl-parent-aria-label="Link to the Item 5.3 page"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span class="ecl-link__label">Item
        5.3</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
      <ul class="ecl-mega-menu__sublist">
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 1</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 2</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 3</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 4</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 5</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 6</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 7</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 8</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 9</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.3 subitem 10</a></li>
        <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">View all</span><svg
              class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#arrow-left"></use>
            </svg></a></li>
      </ul>
    </div>
  </li>
  </li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.4</a></li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.5 with a very long label that will trigger the
      trimming after the third line also for an item without children</a></li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.6</a></li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__sublink"><span class="ecl-link__label">Item
        5.7</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
      </svg></a></li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.8</a></li>
  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__sublink">Item 5.9</a></li>
  </ul>
  </div>
  </li>
  <li class="ecl-mega-menu__item ecl-mega-menu__item--has-container" data-ecl-mega-menu-item data-ecl-has-container
    aria-haspopup aria-expanded="false" id="ecl-mega-menu-item-demo-5"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__link" data-ecl-mega-menu-link
      id="ecl-mega-menu-item-demo-5-link"><span class="ecl-link__label"
        id="ecl-mega-menu-item-demo-5-link-label">Engage</span><svg
        class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
      </svg></a>
    <div class="ecl-mega-menu__mega ecl-mega-menu__mega-container" data-ecl-mega-menu-mega>
      <div class="ecl-mega-menu__mega-container-scrollable">
        <div></div>
      </div>
    </div>
  </li>
  <li class="ecl-mega-menu__item" data-ecl-mega-menu-item id="ecl-mega-menu-item-demo-6"><a href="/example"
      class="ecl-link ecl-link--standalone ecl-mega-menu__link" data-ecl-mega-menu-link
      id="ecl-mega-menu-item-demo-6-link">Contact</a></li>
  </ul>
  </section>
  </div>
</nav>