<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="/component-library/v3.13.0/example" data-ecl-menu-open=""><svg class="ecl-icon ecl-icon--s"
focusable="false" aria-hidden="true">
<use xlink:href="/component-library/v3.13.0/dist/media/icons.75c96284.svg#hamburger"></use>
</svg>Menu</a>
<section class="ecl-menu__inner" data-ecl-menu-inner="" role="application" aria-label="Menu">
<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="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/dist/media/icons.75c96284.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="" id="ecl-menu-item-demo-0"><a
href="/component-library/v3.13.0/example" class="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--has-children" data-ecl-menu-item="" data-ecl-has-children=""
aria-haspopup="" aria-expanded="false" id="ecl-menu-item-demo-1"><a href="/component-library/v3.13.0/example"
class="ecl-menu__link" data-ecl-menu-link="" id="ecl-menu-item-demo-1-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'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 ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 2.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/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="/component-library/v3.13.0/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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 2.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 2.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 2.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/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="/component-library/v3.13.0/dist/media/icons.75c96284.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" id="ecl-menu-item-demo-2"><a href="/component-library/v3.13.0/example"
class="ecl-menu__link" data-ecl-menu-link="" id="ecl-menu-item-demo-2-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'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 ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 3.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 3.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 3.3</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item" data-ecl-menu-item="" id="ecl-menu-item-demo-3"><a
href="/component-library/v3.13.0/example" class="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="/component-library/v3.13.0/example"
class="ecl-menu__link" data-ecl-menu-link="" id="ecl-menu-item-demo-4-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'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 ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 5.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 5.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 5.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/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" id="ecl-menu-item-demo-5"><a href="/component-library/v3.13.0/example"
class="ecl-menu__link" data-ecl-menu-link="" id="ecl-menu-item-demo-5-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's children" aria-describedby="ecl-menu-item-demo-5-link"
aria-expanded="false"><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="/component-library/v3.13.0/dist/media/icons.75c96284.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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/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="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.14</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.15</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.16</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.17</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.18</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.19</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.20</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.21</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.22</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.23</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.24</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.25</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.26</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.27</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/component-library/v3.13.0/example"
class="ecl-menu__sublink">Item 6.28</a></li>
</ul>
</div>
</li>
</ul>
</section>
</div>
</nav>Try it yourself on the playground
Playground