Menu

<nav class="ecl-menu" data-ecl-menu data-ecl-menu-max-lines="2" data-ecl-auto-init="Menu"
  data-ecl-menu-label-open="Menu" data-ecl-menu-label-close="Close" aria-expanded="false" role="navigation"
  aria-label="Main navigation">
  <div class="ecl-menu__overlay"></div>
  <div class="ecl-container ecl-menu__container"><button
      class="ecl-button ecl-button--tertiary ecl-menu__open ecl-button--icon-only" type="button" data-ecl-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-menu__inner" data-ecl-menu-inner aria-label="Menu">
      <header class="ecl-menu__inner-header"><button
          class="ecl-button ecl-button--ghost ecl-menu__close ecl-button--icon-only" type="submit"
          data-ecl-menu-close><span class="ecl-button__container"><span class="ecl-button__label"
              data-ecl-label="true">Close</span><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></button>
        <div class="ecl-menu__title">Menu</div><button class="ecl-button ecl-button--ghost ecl-menu__back" type="submit"
          data-ecl-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><button
        class="ecl-button ecl-button--ghost ecl-menu__item ecl-menu__items-previous ecl-button--icon-only" 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" 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">Previous items</span></span></button><button
        class="ecl-button ecl-button--ghost ecl-menu__item ecl-menu__items-next ecl-button--icon-only" 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" 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">Next items</span></span></button>
      <ul class="ecl-menu__list" data-ecl-menu-list>
        <li class="ecl-menu__item" data-ecl-menu-item id="ecl-menu-item-demo-0"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-menu__link" data-ecl-menu-link
            id="ecl-menu-item-demo-0-link">Home</a></li>
        <li class="ecl-menu__item ecl-menu__item--current ecl-menu__item--has-children" data-ecl-menu-item
          data-ecl-has-children aria-haspopup aria-expanded="false" id="ecl-menu-item-demo-1"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-menu__link ecl-menu__link--current" data-ecl-menu-link
            id="ecl-menu-item-demo-1-link">Principles, countries, history</a><button
            class="ecl-button ecl-button--ghost ecl-menu__button-caret ecl-button--icon-only" type="button"
            data-ecl-menu-caret aria-label="Access item's children"
            aria-describedby="ecl-menu-item-demo-1-link" aria-expanded="false"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 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-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-link ecl-link--standalone ecl-menu__sublink">Item 2.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone 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-link ecl-link--standalone ecl-menu__sublink ecl-menu__sublink--current"
                  aria-current="page">Item 2.3</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 2.4</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 2.5</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 2.6</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon ecl-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="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-menu__subitem ecl-menu__see-all"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon ecl-menu__sublink"><span
                    class="ecl-link__label">See all pages</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>
        </li>
        <li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item data-ecl-has-children aria-haspopup
          aria-expanded="false" id="ecl-menu-item-demo-2"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-menu__link" data-ecl-menu-link
            id="ecl-menu-item-demo-2-link">Institutions, law, budget</a><button
            class="ecl-button ecl-button--ghost ecl-menu__button-caret ecl-button--icon-only" type="button"
            data-ecl-menu-caret aria-label="Access item's children"
            aria-describedby="ecl-menu-item-demo-2-link" aria-expanded="false"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 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-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-link ecl-link--standalone ecl-menu__sublink">Item 3.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 3.2</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 3.3</a></li>
              <li class="ecl-menu__subitem ecl-menu__see-all"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon ecl-menu__sublink"><span
                    class="ecl-link__label">See all pages</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>
        </li>
        <li class="ecl-menu__item" data-ecl-menu-item id="ecl-menu-item-demo-3"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-menu__link" data-ecl-menu-link
            id="ecl-menu-item-demo-3-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" id="ecl-menu-item-demo-4"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-menu__link" data-ecl-menu-link id="ecl-menu-item-demo-4-link">News
            and events</a><button class="ecl-button ecl-button--ghost ecl-menu__button-caret ecl-button--icon-only"
            type="button" data-ecl-menu-caret aria-label="Access item's children"
            aria-describedby="ecl-menu-item-demo-4-link" aria-expanded="false"><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 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-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-link ecl-link--standalone ecl-menu__sublink">Item 5.1</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.2</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.3</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.4</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.5</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.6</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.7</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.8</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.9 with a very long label</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.10</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.11</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.12</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.13</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.14</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.15</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.16</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.17</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.18</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.19</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.20</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.21</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.22</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.23</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.24</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.25</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.26</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.27</a></li>
              <li class="ecl-menu__subitem" data-ecl-menu-subitem><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-menu__sublink">Item 5.28</a></li>
              <li class="ecl-menu__subitem ecl-menu__see-all"><a href="/example"
                  class="ecl-link ecl-link--standalone ecl-link--icon ecl-menu__sublink"><span
                    class="ecl-link__label">See all pages</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>
        </li>
      </ul>
    </section>
  </div>
</nav>