<nav class="ecl-menu ecl-menu--group1" data-ecl-menu="" data-ecl-auto-init="Menu" aria-expanded="false">
<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.3278a5c4.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.3278a5c4.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--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.3278a5c4.svg#corner-arrow"></use>
</svg><span class="ecl-button__label" data-ecl-label="">Back</span></span></button>
</header>
<ul class="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--current ecl-menu__item--has-children" data-ecl-menu-item=""
data-ecl-has-children=""><a href="/example" class="ecl-menu__link ecl-menu__link--current"
data-ecl-menu-link="">Item 2 label<svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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">Item
2.7</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""><a
href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 3 with a very long label<svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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 ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""><a
href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 4 label<svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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
4.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.3 with a very long label going on 2 lines</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.10</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.11</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.12</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.13</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
4.14</a></li>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""><a
href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 5 label<svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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=""><a
href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 6 label<svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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>
</ul>
</div>
</li>
<li class="ecl-menu__item ecl-menu__item--has-children" data-ecl-menu-item="" data-ecl-has-children=""><a
href="/example" class="ecl-menu__link" data-ecl-menu-link="">Item 7 label<svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-menu__link-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
<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
7.1</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.2</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.3</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.4</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.5</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.6</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.7</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.8</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.9</a></li>
<li class="ecl-menu__subitem" data-ecl-menu-subitem=""><a href="/example" class="ecl-menu__sublink">Item
7.10</a></li>
</ul>
</div>
</li>
</ul>
</section>
</div>
</nav>Try it yourself on the playground
Playground