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 aria-label="Main navigation">
  <div class="ecl-mega-menu__overlay"></div>
  <div class="ecl-container ecl-mega-menu__container"><button
      class="ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only" type="button"
      data-ecl-mega-menu-open aria-expanded="false"><span class="ecl-button__container"><svg
          class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon>
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#hamburger"></use>
        </svg><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon>
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#close"></use>
        </svg><span class="ecl-button__label" data-ecl-label="true">Menu</span></span></button>
    <section class="ecl-mega-menu__inner" data-ecl-mega-menu-inner>
      <header class="ecl-mega-menu__inner-header"><button class="ecl-button ecl-button--tertiary 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.e3d8f25c.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">
        <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 id="ecl-mega-menu-item-demo-1"><button
            class="ecl-button ecl-button--primary ecl-mega-menu__link" type="button" data-ecl-mega-menu-link
            id="ecl-mega-menu-item-demo-1-link" aria-expanded="false"><span class="ecl-button__container"><span
                class="ecl-button__label" data-ecl-label="true">News and media</span><svg
                class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true"
                data-ecl-icon>
                <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
              </svg><svg class="ecl-icon ecl-icon--s ecl-icon--flip-horizontal ecl-button__icon" focusable="false"
                aria-hidden="true" data-ecl-icon>
                <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
              </svg></span></button>
          <div class="ecl-mega-menu__wrapper">
            <div class="ecl-container">
              <div class="ecl-mega-menu__info ecl-mega-menu__info--has-link" data-ecl-mega-menu-mega><span
                  class="ecl-mega-menu__info-title" id="ecl-mega-menu-item-demo-1-info-title">About the News and
                  Media</span>
                <div class="ecl-mega-menu__info-scrollable">
                  <div class="ecl-mega-menu__info-content">Description text, lorem ipsum dolor sit amet, consectetur
                    adipiscing elit.</div><a href="/example"
                    class="ecl-link ecl-link--standalone ecl-link--icon  ecl-mega-menu__info-link"
                    aria-describedby="ecl-mega-menu-item-demo-1-info-title"><span class="ecl-link__label">Discover
                      more</span><svg class="ecl-icon ecl-icon--xs ecl-icon--flip-horizontal ecl-link__icon"
                      focusable="false" aria-hidden="true">
                      <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
                    </svg></a>
                </div>
              </div>
              <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
                <ul class="ecl-mega-menu__sublist" aria-label="Pages in this section">
                  <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><button
                      class="ecl-button ecl-button--primary ecl-mega-menu__sublink" type="button"
                      data-ecl-mega-menu-sublink aria-expanded="false" id="item-2-1-id"><span
                        class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Item
                          2.1</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon"
                          focusable="false" aria-hidden="true" data-ecl-icon>
                          <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
                        </svg></span></button>
                    <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
                      <ul class="ecl-mega-menu__sublist" aria-label="Sub-pages in this section">
                        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                            class="ecl-link ecl-link--standalone ecl-mega-menu__sublink" data-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"
                            data-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="false"
                              role="img">
                              <title>Link to an external domain</title>
                              <use xlink:href="/dist/media/icons.e3d8f25c.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" data-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" data-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 ecl-mega-menu__sublink--last"
                            data-ecl-mega-menu-sublink>Item 2.1 subitem 5</a></li>
                        <li class="ecl-mega-menu__spacer"></li>
                        <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
                            class="ecl-link ecl-link--standalone ecl-link--icon" aria-describedby="item-2-1-id"><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.e3d8f25c.svg#arrow-left"></use>
                            </svg></a></li>
                      </ul>
                      <div class="ecl-mega-menu__featured" data-ecl-mega-menu-featured>
                        <div class="ecl-mega-menu__featured-scrollable">
                          <picture class="ecl-picture ecl-mega-menu__featured-picture"><img
                              class="ecl-mega-menu__featured-image"
                              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
                              alt="Jean Monnet banner" /></picture><span class="ecl-mega-menu__featured-title"
                            id="ecl-mega-menu-featured-title-item-2-1-id">Featured items</span>
                          <ul class="ecl-mega-menu__featured-list"
                            aria-labelledby="ecl-mega-menu-featured-title-item-2-1-id item-2-1-id">
                            <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                                class="ecl-link ecl-link--standalone" data-ecl-mega-menu-featured-link>Featured link
                                1</a></li>
                            <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                                class="ecl-link ecl-link--standalone" data-ecl-mega-menu-featured-link>Featured link
                                2</a></li>
                          </ul>
                        </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" data-ecl-mega-menu-sublink>Item 2.2</a></li>
        <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><button
            class="ecl-button ecl-button--primary ecl-mega-menu__sublink" type="button" data-ecl-mega-menu-sublink
            aria-expanded="false"><span class="ecl-button__container"><span class="ecl-button__label"
                data-ecl-label="true">Item 2.3 that has a very long label</span><svg
                class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true"
                data-ecl-icon>
                <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
              </svg></span></button>
          <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
            <ul class="ecl-mega-menu__sublist" aria-label="Sub-pages in this section">
              <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-mega-menu__sublink" data-ecl-mega-menu-sublink>Item 2.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" data-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 ecl-mega-menu__sublink--last"
                  data-ecl-mega-menu-sublink>Item 2.3 subitem 3</a></li>
            </ul>
        </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" data-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" data-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" data-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-mega-menu__sublink ecl-mega-menu__sublink--last"
            data-ecl-mega-menu-sublink>Item 2.7</a></li>
      </ul>
      </li>
      <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
        aria-haspopup id="ecl-mega-menu-item-demo-2"><button class="ecl-button ecl-button--primary ecl-mega-menu__link"
          type="button" data-ecl-mega-menu-link id="ecl-mega-menu-item-demo-2-link" aria-expanded="false"><span
            class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">About the European
              Commission</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon"
              focusable="false" aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
            </svg><svg class="ecl-icon ecl-icon--s ecl-icon--flip-horizontal ecl-button__icon" focusable="false"
              aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
            </svg></span></button>
        <div class="ecl-mega-menu__wrapper">
          <div class="ecl-container">
            <div class="ecl-mega-menu__info ecl-mega-menu__info--has-link" data-ecl-mega-menu-mega><span
                class="ecl-mega-menu__info-title" id="ecl-mega-menu-item-demo-2-info-title">About the European
                Commission</span>
              <div class="ecl-mega-menu__info-scrollable">
                <div class="ecl-mega-menu__info-content">Description text, lorem ipsum dolor sit amet, consectetur
                  adipiscing elit.</div><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon  ecl-mega-menu__info-link"
                  aria-describedby="ecl-mega-menu-item-demo-2-info-title"><span class="ecl-link__label">Discover
                    more</span><svg class="ecl-icon ecl-icon--xs ecl-icon--flip-horizontal ecl-link__icon"
                    focusable="false" aria-hidden="true">
                    <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
                  </svg></a>
              </div>
            </div>
            <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
              <ul class="ecl-mega-menu__sublist" aria-label="Pages in this section">
                <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                    class="ecl-link ecl-link--standalone ecl-mega-menu__sublink" data-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" data-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 ecl-mega-menu__sublink--last"
                    data-ecl-mega-menu-sublink>Item 3.3</a></li>
              </ul>
      </li>
      <li class="ecl-mega-menu__item ecl-mega-menu__item--has-children" data-ecl-mega-menu-item data-ecl-has-children
        aria-haspopup id="ecl-mega-menu-item-demo-3"><button class="ecl-button ecl-button--primary ecl-mega-menu__link"
          type="button" data-ecl-mega-menu-link id="ecl-mega-menu-item-demo-3-link" aria-expanded="false"><span
            class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Key
              priorities</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon"
              focusable="false" aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
            </svg><svg class="ecl-icon ecl-icon--s ecl-icon--flip-horizontal ecl-button__icon" focusable="false"
              aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
            </svg></span></button>
        <div class="ecl-mega-menu__wrapper">
          <div class="ecl-container">
            <div class="ecl-mega-menu__info" data-ecl-mega-menu-mega><span class="ecl-mega-menu__info-title"
                id="ecl-mega-menu-item-demo-3-info-title">About key priorities</span>
              <div class="ecl-mega-menu__info-scrollable">
                <div class="ecl-mega-menu__info-content">Description text, lorem ipsum dolor sit amet, consectetur
                  adipiscing elit.</div>
              </div>
            </div>
            <div class="ecl-mega-menu__mega" data-ecl-mega-menu-mega>
              <ul class="ecl-mega-menu__sublist" aria-label="Pages in this section">
                <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                    class="ecl-link ecl-link--standalone ecl-mega-menu__sublink" data-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" data-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" data-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" data-ecl-mega-menu-sublink>EU regional
                    and urban development</a></li>
                <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><button
                    class="ecl-button ecl-button--primary ecl-mega-menu__sublink" type="button"
                    data-ecl-mega-menu-sublink aria-expanded="false" id="research-and-innovation-id"><span
                      class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Research and
                        innovation</span><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon"
                        focusable="false" aria-hidden="true" data-ecl-icon>
                        <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
                      </svg></span></button>
                  <div class="ecl-mega-menu__mega ecl-mega-menu__mega--level-2" data-ecl-mega-menu-mega>
                    <ul class="ecl-mega-menu__sublist" aria-label="Sub-pages in this section">
                      <li class="ecl-mega-menu__subitem" data-ecl-mega-menu-subitem><a href="/example"
                          class="ecl-link ecl-link--standalone ecl-mega-menu__sublink" data-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" data-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 ecl-mega-menu__sublink--last"
                          data-ecl-mega-menu-sublink>Get involved in EU humanitarian aid</a></li>
                      <li class="ecl-mega-menu__spacer"></li>
                      <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all"><a href="/example"
                          class="ecl-link ecl-link--standalone ecl-link--icon"
                          aria-describedby="research-and-innovation-id"><span class="ecl-link__label">See all
                            items</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.e3d8f25c.svg#arrow-left"></use>
                          </svg></a></li>
                    </ul>
                    <div class="ecl-mega-menu__featured" data-ecl-mega-menu-featured>
                      <div class="ecl-mega-menu__featured-scrollable">
                        <picture class="ecl-picture ecl-mega-menu__featured-picture"><img
                            class="ecl-mega-menu__featured-image"
                            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
                            alt="Jean Monnet banner" /></picture><span class="ecl-mega-menu__featured-title"
                          id="ecl-mega-menu-featured-title-research-and-innovation-id">Featured items</span>
                        <ul class="ecl-mega-menu__featured-list"
                          aria-labelledby="ecl-mega-menu-featured-title-research-and-innovation-id research-and-innovation-id">
                          <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                              class="ecl-link ecl-link--standalone" data-ecl-mega-menu-featured-link>Featured link 1</a>
                          </li>
                          <li class="ecl-mega-menu__featured-list__item"><a href="/example"
                              class="ecl-link ecl-link--standalone" data-ecl-mega-menu-featured-link>Featured link 2</a>
                          </li>
                        </ul>
                      </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 ecl-mega-menu__sublink--last"
          data-ecl-mega-menu-sublink>Food, Farming, Fisheries</a></li>
      </ul>
      </li>
      <li class="ecl-mega-menu__item ecl-mega-menu__item--has-container" data-ecl-mega-menu-item data-ecl-has-container
        aria-haspopup id="ecl-mega-menu-item-demo-4"><button class="ecl-button ecl-button--primary ecl-mega-menu__link"
          type="button" data-ecl-mega-menu-link id="ecl-mega-menu-item-demo-4-link" aria-expanded="false"><span
            class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Engage</span><svg
              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true"
              data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
            </svg><svg class="ecl-icon ecl-icon--s ecl-icon--flip-horizontal ecl-button__icon" focusable="false"
              aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.e3d8f25c.svg#arrow-left"></use>
            </svg></span></button>
        <div class="ecl-mega-menu__mega ecl-mega-menu__mega-container" data-ecl-mega-menu-mega>
          <div class="ecl-container">
            <div class="ecl-mega-menu__mega-container-scrollable">
              <div></div>
            </div>
          </div>
        </div>
      </li>
      <li class="ecl-mega-menu__item" data-ecl-mega-menu-item id="ecl-mega-menu-item-demo-5"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-mega-menu__link" data-ecl-mega-menu-link
          id="ecl-mega-menu-item-demo-5-link">Contact</a></li>
      </ul>
    </section>
  </div>
</nav>