Menu

<nav class="ecl-menu ecl-menu--group1" data-ecl-menu="" data-ecl-menu-max-lines="2" data-ecl-auto-init="Menu"
  aria-expanded="false" role="navigation">
  <div class="ecl-menu__overlay" data-ecl-menu-overlay=""></div>
  <div class="ecl-container ecl-menu__container"><a class="ecl-link ecl-link--standalone ecl-menu__open" href="/example"
      data-ecl-menu-open=""><svg class="ecl-icon ecl-icon--s" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.df9fbcbe.svg#hamburger"></use>
      </svg>Menu</a>
    <section class="ecl-menu__inner" data-ecl-menu-inner="">
      <header class="ecl-menu__inner-header"><button class="ecl-menu__close ecl-button ecl-button--text" type="submit"
          data-ecl-menu-close=""><span class="ecl-menu__close-container ecl-button__container"><svg
              class="ecl-icon ecl-icon--s ecl-button__icon ecl-button__icon--before" focusable="false"
              aria-hidden="true" data-ecl-icon="">
              <use xlink:href="/dist/media/icons.df9fbcbe.svg#close-filled"></use>
            </svg><span class="ecl-button__label" data-ecl-label="true">Close</span></span></button>
        <div class="ecl-menu__title">Menu</div><button data-ecl-menu-back="" type="submit"
          class="ecl-menu__back ecl-button ecl-button--text"><span class="ecl-button__container"><svg
              class="ecl-icon ecl-icon--xs ecl-icon--rotate-270 ecl-button__icon ecl-button__icon--before"
              focusable="false" aria-hidden="true" data-ecl-icon="">
              <use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
            </svg><span class="ecl-button__label" data-ecl-label="">Back</span></span></button>
      </header><button class="ecl-button ecl-button--ghost ecl-menu__item ecl-menu__items-previous" type="button"
        data-ecl-menu-items-previous="" tabindex="-1"><span class="ecl-button__container"><svg
            class="ecl-icon ecl-icon--s ecl-icon--rotate-270 ecl-button__icon ecl-button__icon--before"
            focusable="false" aria-hidden="true" data-ecl-icon="">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
          </svg><span class="ecl-u-sr-only" data-ecl-label="true">Previous items</span></span></button><button
        class="ecl-button ecl-button--ghost ecl-menu__item ecl-menu__items-next" type="button"
        data-ecl-menu-items-next="" tabindex="-1"><span class="ecl-button__container"><svg
            class="ecl-icon ecl-icon--s ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--before" focusable="false"
            aria-hidden="true" data-ecl-icon="">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
          </svg><span class="ecl-u-sr-only" data-ecl-label="true">Next items</span></span></button>
      <ul class="ecl-menu__list" data-ecl-menu-list="">
        <li class="ecl-menu__item" data-ecl-menu-item=""><a href="/example" class="ecl-menu__link"
            data-ecl-menu-link="">Home</a></li>
        <li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
          aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link"
            data-ecl-menu-link="">Principles, countries, history</a><button
            class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button" data-ecl-menu-caret=""
            aria-label="Access item&#x27;s children"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs 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.df9fbcbe.svg#corner-arrow"></use>
              </svg></span></button>
          <div class="ecl-menu__mega" data-ecl-menu-mega="">
            <ul class="ecl-menu__sublist">
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  2.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  2.2</a></li>
              <li class="ecl-menu__subitem ecl-menu__subitem--current" data-ecl-menu-subitem=""><a href="/example"
                  class="ecl-menu__sublink ecl-menu__sublink--current">Item 2.3</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  2.4</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  2.5</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  2.6</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example"
                  class="ecl-menu__sublink ecl-link--icon-after">Item 2.7<svg
                    class="ecl-icon ecl-icon--2xs ecl-menu__sublink-icon ecl-link__icon" focusable="false"
                    aria-hidden="true">
                    <use xlink:href="/dist/media/icons.df9fbcbe.svg#external"></use>
                  </svg></a></li>
            </ul>
          </div>
        </li>
        <li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
          aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link"
            data-ecl-menu-link="">Institutions, law, budget</a><button
            class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button" data-ecl-menu-caret=""
            aria-label="Access item&#x27;s children"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs 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.df9fbcbe.svg#corner-arrow"></use>
              </svg></span></button>
          <div class="ecl-menu__mega" data-ecl-menu-mega="">
            <ul class="ecl-menu__sublist">
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  3.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  3.2</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  3.3</a></li>
            </ul>
          </div>
        </li>
        <li class="ecl-menu__item" data-ecl-menu-item=""><a href="/example" class="ecl-menu__link"
            data-ecl-menu-link="">Priorities and actions</a></li>
        <li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
          aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">Live,
            work, study</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button"
            data-ecl-menu-caret="" aria-label="Access item&#x27;s children"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs 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.df9fbcbe.svg#corner-arrow"></use>
              </svg></span></button>
          <div class="ecl-menu__mega" data-ecl-menu-mega="">
            <ul class="ecl-menu__sublist">
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  5.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  5.2</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  5.3</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  5.4</a></li>
            </ul>
          </div>
        </li>
        <li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""
          aria-haspopup="" aria-expanded="false"><a href="/example" class="ecl-menu__link" data-ecl-menu-link="">News
            and events</a><button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button"
            data-ecl-menu-caret="" aria-label="Access item&#x27;s children"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs 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.df9fbcbe.svg#corner-arrow"></use>
              </svg></span></button>
          <div class="ecl-menu__mega" data-ecl-menu-mega="">
            <ul class="ecl-menu__sublist">
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.2</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.3</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.4</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.5</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.6</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.7</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.8</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.9 with a very long label</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.10</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.11</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.12</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.13</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.14</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.15</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.16</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.17</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.18</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.19</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.20</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.21</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.22</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.23</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.24</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.25</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.26</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.27</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
                  6.28</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </section>
  </div>
</nav>